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-sizing 属性的 border-box 值。这样，如果为元素添加边框，它将包含在您的宽度中，因此您只需在链接上使用宽度：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/

ul带边框的百分比宽度

1 个答案: