0

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”，会变得更好，但我不想删除它，因为它会导致站点上的其他问题。我怎样才能用其他方式解决这个问题？

4

2 回答 2

2

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

于 2012-12-20T15:50:22.130 回答
2

如果要浮动链接，则需要 clearfix 父级。

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

在 JSFiddle 上查看。在此处阅读有关清除修复的更多信息。

于 2012-12-20T15:53:50.537 回答