帶邊框的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/