오른쪽에 아이콘이있는 반응이없는 목록을 만드는 방법

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; 
} 


}