分配百分比宽度的标签，而他们有边框

请考虑以下几点：http://jsfiddle.net/CASM6/9/分配百分比宽度的标签，而他们有边框

我有标签的两行。第一行有两个标签，第二行有三个标签。我希望所有这些选项卡整齐地落在一个矩形内，外边框完美匹配。如果没有国界，这将很容易。上方标签的宽度为50％，下方标签的宽度为33.333333％。但较低的标签有边框。这些边界的宽度会让事情变得糟糕。我如何达到理想的效果？谢谢！

来源

2012-01-14 Barka

这可能不是你想听到的，但是如果你想混合百分比和px，你可以通过添加一个额外的包装元素来获得最简单的时间。也就是说，如果你想成为准确的。

我将li内容包裹在div中，并将边框设置为div。

演示：http://jsfiddle.net/CASM6/13/

<ul> 
    <li id='left-btm'><div>Bottom 1</div></li> 
    <li><div>Bottom 2</div></li> 
    <li id='right-btm'><div>Bottom 3</div></li> 
</ul>

#bottom li { 
    background-color:red; 
    width:33.33%; /* as close as we can get to 1/3... */ 
} 

#left-btm div, #right-btm div 
{ 
    border-left-color:black; 
    border-right-color:black; 
    border-left-width:medium; 
    border-right-width:medium; 
    border-left-style:solid; 
    border-right-style:solid; 
}

除了将容器拆分成不完美的三分之一所剩的0.1%之外，布局在每个示例中都是像素完美的。您可以通过在与边框相匹配的容器上设置background-color来弥补这一点。

你可以整天摆弄ems和百分比的一小部分，但你永远不可能让它们完美，因为它们是相对宽度，不像px。如果你知道容器的确切像素宽度，这可能工作，但如果是这种情况，你可以使用px单位来衡量一切。这种方法确保了在任何宽度下的准确性

来源

2012-01-14 05:45:54

分配百分比宽度的标签，而他们有边框

回答

相关问题