列表底部边框浮动左侧问题

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

由于动态内容，我不知道列表项的值是多少。单行没有任何问题。但是如果列表项有双行，列表border-bottom就像下面的图像一样移动;

如果我从标签css中删除“float：left”，那就越好但我不想删除它，因为它会导致网站出现其他问题。如何以其他方式修复此问题？

Answer 1

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

Answer 2

如果您要浮动链接，则需要清除父级。

.list ul li:after{
  content: "";
  display: table;
  clear: both;
}

View it on JSFiddle。详细了解clearfixing here。