带边框的ul百分比宽度

Question

我有一个ul和直接在下面的表格，并且我想要2排成一列。不幸的是，正如我发现的，百分比不能应用于我所拥有的边界，这会导致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;  
} 

Answer 1

使用边界-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; 
} 

例子：http://jsfiddle.net/cemLkm5j/2/