带边框的ul百分比宽度
问题描述:
我有一个ul和直接在下面的表格,并且我想要2排成一列。不幸的是,正如我发现的,百分比不能应用于我所拥有的边界,这会导致ul太宽或太窄,这取决于屏幕大小。带边框的ul百分比宽度
显然把东西放进一个容器应该可以做到,但是我无法得到这个工作。有小费吗?
它的蓝色边框是这样的罪犯,在的jsfiddle如下所示:http://jsfiddle.net/cemLkm5j/1/
HTML例如:
<ul class="nav">
<li><a href="">Home</a></li><li><a href="">Couriers</a</li><li><a href="">Reviews</a></li><li><a href="">Retailers</a></li>
</ul>
<table>
<tr>
<td>
test
</td>
</tr>
CSS:
.nav a {
border-left: 0px solid !important;
border-right: 5px solid !important;
width: 44.6% !important;
margin: 0px !important;
padding: 0px !important;
line-height: 30px !important;
vertical-align: middle !important;
}
答
使用边界-box th值e 箱子大小财产为您的链接。这样,如果你为你的元素添加边框,它将被包含在你的宽度中,所以你可以简单地在你的链接上使用宽度:50%。这是如何工作的:
.nav a {
border-left: 0px solid !important;
border-right: 5px solid !important;
width: 50% !important;
margin: 0px !important;
padding: 0px !important;
line-height: 30px !important;
vertical-align: middle !important;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
此外,您还需要定义相同的宽度为您导航的容器,90%,就像表:
.nav {
width: 90%;
margin: 0 auto !important;
}
精彩,非常感谢! –