Question

我有一个列表，我在右边添加了箭头。我需要让它响应。但是当浏览器调整大小时，箭头会换行到下一行，文本会与其他文本重叠。这意味着将根据所选列表隐藏或显示段落，但我还没有添加该代码，因为我似乎无法使列表适用于响应。我还尝试在列表元素周围放置一个div，并在箭头的list标签中添加一个单独的div，但这并不起作用。我也尝试将无序列表显示为表格的显示，列表显示表格单元格，但我也无法使用它。在任何情况下，我都不确定我做错了什么。 reponsive只有一个断点，那就是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

如果使用display：none |用于切换可见性的块，未选择的段落将崩溃。此外，当浏览器窗口大于您的媒体查询时，我浮动左列，并为右列提供了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;
}


}

如何使无序列表响应，右侧有图标

1 个答案: