调整li border-bottom“length”

Question

这是一个id为“leftmenu”

的无序列表的CSS

#leftmenu ul li{
list-style:none;
padding:15px 0 8px 0;
border-bottom:1px dashed white;
float:left;
clear:both;    

问题是边框只会到文本去。见：http://imgur.com/dhx2OKk
我希望它像“链接”下的那个边界

Answer 1

问题是您的列表项应显示为常规块项。这些将始终扩展到任何容器的整个宽度。对于实际上是默认行为的<li>元素。

通过将float: left;设置为<li>项，可以更改此行为。以下代码将实现您的目标（也检查JS小提琴）

* {
    margin: 0;
    padding: 0;
}

h4 {
    border-bottom: 1px solid black;
}

.menu {
    width: 200px;
}

.menu>ul {
    list-style-type: none;
}

.menu>ul>li {
    margin-top:10px;
    border-bottom: 1px dotted black;
}

http://jsfiddle.net/fhckxene/

编辑：使用jsfiddle进行游戏，例如将float: left;或display: inline-block;添加到<li>样式。