这是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
我希望它像“链接”下的边框一样
最佳答案
问题在于,您的列表项应显示为常规冻结项。这些将始终缩放到任何容器的整个宽度。对于实际上是默认行为的<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>
样式。