如何制作响应式图标右侧的无序列表

Question

我有一个列表，我已将箭头添加到右侧。我需要做出反应。但是，当浏览器调整大小时，箭头将换行到下一行，文本与其他文本重叠。这旨在使段落隐藏或显示基于所选择的列表，但我还没有添加该代码，因为我似乎无法让列表工作的响应。我也尝试在列表元素周围放置一个div，并在箭头的列表标签内添加一个单独的div，但那不起作用。我也尝试将无序列表添加到表格的显示中，并列出了表格单元格的显示，但是我无法使其工作。我不知道我在做什么错。只有一个反应的断点，那就是960.感谢任何能够帮助的人！

HTML：

<div class="col-left"> 
    <div class="line-left"></div> 
    <ul class="faqs"> 
     <li class="sel"><a href="#">What is a notification?</a> 
      <p class="faq">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat. </p> 

     </li> 
     <li><a href="#">How do I know if I’m eligible for notifications?</a> 
     <p class="faq">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat. </p> 
     </li> 
     <li><a href="#">Will I see all notifications?</a> 
     <p class="faq">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat. </p> 
     </li> 
    </ul> 
</div> 

<div class="col-right"> 
    <div class="line-right"></div> 
    <ul class="faqs"> 
     <li><a href="#">How often are notifications sent?</a> 
     <p class="faq">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat. </p> 
     </li> 
     <li><a href="#">How do I receive notifications?</a> 
     <p class="faq">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat. </p> 
     </li> 
     <li><a href="#">What will I actually see in the notifications?</a> 
     <p class="faq">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat. </p> 
     </li> 
    </ul> 
    </div>  

CSS：

ul.faqs { 
    list-style-type: none; 
    padding: 0; 
    margin: 0; 
} 


li { 
    display: block; 
    width: 470px; 
    height:auto; 
    height: 56px; 
    line-height:56px; 
    border-bottom: 1px solid #d8d8d8; 
} 
li a { 
    display: block; 
    font-family: "helvetica-75-bold"; 
    font-size:16px; 
    color:343366; 
    text-decoration: none; 
} 

li a:after { 
    content: ""; 
    display: inline-block; 
    width:41px; 
    height:22px; 
    background: url(../images/../images/DropDownCarat.svg) no-repeat; 
    float: right; 
    position: relative; 
    top: 19px; 
} 

li a:hover:after { 
    content: ""; 
    display: inline-block; 
    width:41px; 
    height:22px; 
    background: url(../images/../images/DropDownCarat-hov.svg) no-repeat; 
    float: right; 
    position: relative; 
    top: 19px; 
} 

li.sel { 
    height: auto; 
} 

li.sel p { 
    margin-top: -5px; 
    line-height: 19px; 
    margin-bottom: 20px; 
    color: #595959; 
    visibility: visible; 
} 

p.faq { 
    visibility: hidden; 
} 


li.sel a:after { 
    content: ""; 
    display: inline-block; 
    width:41px; 
    height:22px; 
    background: url(../images/../images/DropDownCarat.svg) no-repeat; 
    -webkit-transform: rotate(-180deg); 
    -moz-transform: rotate(-180deg); 
    -ms-transform: rotate(-180deg); 
    -o-transform: rotate(-180deg); 
    transform: rotate(-180deg); 
    margin-right:20px; 

} 

li.sel a:hover:after { 
    content: ""; 
    display: inline-block; 
    width:41px; 
    height:22px; 
    background: url(../images/../images/DropDownCarat-hov.svg) no-repeat; 
    -webkit-transform: rotate(-180deg); 
    -moz-transform: rotate(-180deg); 
    -ms-transform: rotate(-180deg); 
    -o-transform: rotate(-180deg); 
    transform: rotate(-180deg); 
    margin-right:20px; 
} 


@media (max-width:960px){ 

    .faqs-title { 
    padding-left: 30px; 
    padding-bottom: 35px; 
} 

    .content-faqs { 
    width: 100%; 
    margin:0 auto; 
    padding-left:30px; 
    padding-right:30px; 
    height: 500px; 
} 

.col-left { 
    width: 100%; 
    float:none; 
    margin-right: 30px; 
} 

.col-right { 
    width: 100%; 
    float:none; 
} 

    .line-left { 
    width: 100%; 
    height:1px; 
    background-color:#d8d8d8; 

} 

    .line-right { 
    display: none; 

} 

    li { 
    display: block; 
    width: 100%; 
    height;auto; 
    border-bottom: 1px solid #d8d8d8; 
} 


} 

Answer 1

如果使用显示：无|用于切换可见性的块，未选段落将会崩溃。另外，当浏览器窗口大于您的媒体查询时，我浮动左栏，并向右栏留下50％左边距。

ul.faqs { 
    list-style-type: none; 
    padding: 0; 
    margin: 0; 
} 

li { 
    display: block; 
    width: 470px; 
    height:auto; 
    height: 56px; 
    line-height:56px; 
    border-bottom: 1px solid #d8d8d8; 
} 
li a { 
    display: block; 
    font-family: "helvetica-75-bold"; 
    font-size:16px; 
    color:343366; 
    text-decoration: none; 
} 

li a:after { 
    content: ""; 
    display: inline-block; 
    width:41px; 
    height:22px; 
    background: url(../images/../images/DropDownCarat.svg) no-repeat; 
    float: right; 
    position: relative; 
    top: 19px; 
} 

li a:hover:after { 
    content: ""; 
    display: inline-block; 
    width:41px; 
    height:22px; 
    background: url(../images/../images/DropDownCarat.svg) no-repeat; 
    float: right; 
    position: relative; 
    top: 19px; 
} 

li.sel { 
    height: auto; 
} 

li.sel p { 
    margin-top: -5px; 
    line-height: 19px; 
    margin-bottom: 20px; 
    color: #595959; 
    display: block; 
    /** visibility: visible; **/ 
} 

p.faq { 
    display: none; 
    /** visibility: hidden; **/ 
} 


li.sel a:after { 
    content: ""; 
    display: inline-block; 
    width:41px; 
    height:22px; 
    background: url(../images/../images/DropDownCarat.svg) no-repeat; 
    -webkit-transform: rotate(-180deg); 
    -moz-transform: rotate(-180deg); 
    -ms-transform: rotate(-180deg); 
    -o-transform: rotate(-180deg); 
    transform: rotate(-180deg); 
    margin-right:20px; 

} 

li.sel a:hover:after { 
    content: ""; 
    display: inline-block; 
    width:41px; 
    height:22px; 
    background: url('ddcarat.png') no-repeat; 
    -webkit-transform: rotate(-180deg); 
    -moz-transform: rotate(-180deg); 
    -ms-transform: rotate(-180deg); 
    -o-transform: rotate(-180deg); 
    transform: rotate(-180deg); 
    margin-right:20px; 
} 

.col-left{ 
    float:left; 
} 

.col-right{ 
    margin-left: 50%; 
} 

@media (max-width:960px){ 

.faqs-title { 
    padding-left: 30px; 
    padding-bottom: 35px; 
} 

.content-faqs { 
    width: 100%; 
    margin:0 auto; 
    padding-left:30px; 
    padding-right:30px; 
    height: 500px; 
} 

.col-left { 
    width: 100%; 
    float:none; 
    margin-right: 30px; 
} 

.col-right { 
    width: 100%; 
    float:none; 
    margin-left: 0; 
} 

    .line-left { 
    width: 100%; 
    height:1px; 
    background-color:#d8d8d8; 

} 

    .line-right { 
    display: none; 

} 

    li { 
    display: block; 
    width: 100%; 
    height: auto; /** typo: had semi colon **/ 
    border-bottom: 1px solid #d8d8d8; 
} 


}