jquery - 在标签有边框时为标签分配百分比宽度

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 来弥补这一点。

您可以整天摆弄 em 和百分比的分数，但您永远无法使它们完美，因为它们是相对宽度，与 px 不同。如果您知道容器的确切像素宽度，这可能会起作用，但如果是这种情况，您可能只使用 px 联合来测量所有内容。此方法可确保在任何宽度下的准确性。