css - 列表底部边框向左浮动问题

Question

HTML:

<div class="list">
<ul>
    <li><a href="#">A</a></li>
    <li><a href="#">B</a></li>
    <li>
        <ul>
            <li><a href="#">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</a></li>
            <li><a href="#">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</a></li>
            <li><a href="#">C3</a></li>
            <li><a href="#">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</a></li>
            <li><a href="#">C5</a></li>
        </ul>
    </li>
    <li><a href="#">D</a></li>
    <li><a href="#">E</a></li>
    <li><a href="#">F</a></li>
</ul>
</div>

CSS:

.list{
width:300px;
}

a{
text-decoration:none;
color:#000;
}

.list ul{
padding:0 0 0 12px;
list-style:none;
}

.list ul li{
margin-bottom:8px;
padding-bottom:8px;
border-bottom:1px dashed #CCC;
}

.list ul li a{
display:block;
line-height:15px;
padding:0 0 0 9px;
float:left;
}

.list ul li ul{
padding:0 0 10px 15px; 
}

.list ul li ul li{
margin:4px 0;
min-height:7px;
border:none;
}

.list ul li ul li a{
display:block;
line-height:15px;
padding:0 0 0 9px;
float:left; 
}

由于动态内容，我不知道列表项的值是多少。单行没有任何问题。但是如果列表项有双行，列表边框底部会像下图那样移动；

如果我从标签 css 中删除“float:left”，情况会好转，但我不想删除它，因为它会导致网站出现其他问题。我该如何用其他方式解决这个问题？

Answer 1

尝试将 overflow: hidden 添加到 .list ul li