ul 带边框的百分比宽度

Question

我正下方有一个ul和table，想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

为您的链接使用 border-box 值 box-sizing 属性。这样，如果您向元素添加边框，它将包含在您的宽度中，因此您可以简单地在链接上使用 width: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%，就像 table:

.nav {
    width: 90%;
    margin: 0 auto !important;
}

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

ul 带边框的百分比宽度

ul percentage width with border

html

css

border

html-lists