Question

请考虑以下事项：http://jsfiddle.net/CASM6/9/

我有两排标签。第一行有两个选项卡，第二行有3个选项卡。我希望所有这些标签整齐地落在一个矩形内，外边框完全匹配。如果没有边界，这将很容易。上部标签的宽度为50％，下部标签的宽度为33.333333％。但是下面的标签有边框。而这些边界的宽度使事情变得混乱。我如何达到预期的效果？谢谢！

Answer 1

这可能不是您想要听到的，但如果您想混合百分比和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;
}

这是50em http://jsfiddle.net/CASM6/21/
这是一个3em容器：http://jsfiddle.net/CASM6/20/
49％容器：http://jsfiddle.net/CASM6/19/

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

你可以整天摆弄一小部分的ems和百分比，但是你永远不会把它们变得完美，因为它们是相对宽度，不像px。如果您知道容器的确切像素宽度，这可能会有效，但如果是这样的话，您可以使用px单位来测量所有内容。此方法可确保任何宽度的精度。

在有边框的情况下为标签指定百分比宽度

1 个答案: