调整 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
我希望它像 "Links"

下的那个边框

Answer 1

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

通过将 float: left; 设置为 <li> 项目，改变此行为。下面的代码将实现你所追求的（同时检查 JS fiddle）

* {
    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> 样式。

调整 li border-bottom "length"

adjusting li border-bottom "length"

html

css

border