我有一个水平无序列表,列表几乎是屏幕的一半宽度。
问题是 border-bottom 应用于最后一个 <li>
元素未扩展到页面的整个宽度。
.pageContent .filters{
margin:0px;
padding:0px;
list-style:none;
}
.filters li{
float:left;
display:inline;
border-right:1px solid #e5e6e7;
border-bottom:1px solid #e5e6e7;
}
.filters li:last-child{
border-right:none;
}
.filters li:hover{
background-color:#fcfcfc;
}
.filters li a{
display:block;
padding: 12px 35px;
font-size: 18px;
color:#353535;
text-transform:capitalize;
font-family:'regular';
}
最佳答案
这应该可以满足您的需求。
使用以下 CSS,您可以得到:http://jsfiddle.net/6AGTM/
.filters{
margin:0px;
padding:0px;
list-style:none;
overflow: hidden; /* make container the same height as floating elements inside */
border-bottom:1px solid #e5e6e7; /* apply border to this element which goes to edge of page */
}
.filters li{
float:left;
display:inline;
border-right:1px solid #e5e6e7;
/* remove border-bottom from here */
}
.filters li:last-child{
border-right:none;
}
.filters li:hover{
background-color:#fcfcfc;
}
.filters li a{
display:block;
padding: 12px 35px;
font-size: 18px;
color:#353535;
text-transform:capitalize;
font-family:'regular';
}
关于html - 未排序列表的整页边框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20349222/