Html 如何使右边有图标的无序列表具有响应性

我有一个列表，我在右侧添加了箭头。我需要让它反应灵敏。但当浏览器调整大小时，箭头将环绕到下一行，文本与其他文本重叠。这本书的目的是根据所选列表隐藏或显示段落，但我还没有添加代码，因为我似乎无法让列表用于响应。我还尝试过在列表元素周围放置一个div，并在列表标记中为箭头添加一个单独的div，但没有成功。我还试着将无序列表设置为表的显示，将列表设置为表单元格的显示，但我也无法实现这一点。我不确定我到底做错了什么。responsive只有一个断点，那就是960。谢谢所有能帮忙的人

HTML:

---

如果使用display:none | block切换可见性，则未选定的段落将折叠。此外，我还浮动了左列，当浏览器窗口大于媒体查询时，右列留有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;
}


}  

---

谢谢你的回复。当浏览器宽度达到509像素时，向下箭头开始环绕到下一行，这不起作用。当浏览器宽度达到465像素时，文本换行过低，这是因为行高为56像素。如何解决这一问题，使向下箭头保持在正确的行内，同时允许文本在需要时进行换行。谢谢忘了提到，尽管第二列仍然在右侧，但它似乎被压到第一列的下方，并且仍然存在与前面提到的箭头环绕和线条高度过大最初相同的问题。谢谢你的帮助！我认为向下箭头是因为它们在标题之后。因此，即使浮动它们，它们仍然相对于前一行结束的点进行定位。我认为这可以通过为标题创建一个span类并浮动它来解决。然后设置标题的宽度，使插入符号可以向右换行。或者，您可以利用列表本身来实现此效果。下面是一篇文章，展示了一种将项目符号放置在列表右侧的技术。然后可以使用“列表样式类型”属性设置项目符号以使用插入符号图像：不确定在标题中添加跨距，然后在标题上设置宽度是什么意思。你是说在a标签周围吗？我试过了，但没用。你能给我举个例子吗？谢谢

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


}

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


}