分配百分比宽度的标签,而他们有边框
问题描述:
请考虑以下几点:http://jsfiddle.net/CASM6/9/分配百分比宽度的标签,而他们有边框
我有标签的两行。第一行有两个标签,第二行有三个标签。我希望所有这些选项卡整齐地落在一个矩形内,外边框完美匹配。如果没有国界,这将很容易。上方标签的宽度为50%,下方标签的宽度为33.333333%。但较低的标签有边框。这些边界的宽度会让事情变得糟糕。我如何达到理想的效果?谢谢!
答
这可能不是你想听到的,但是如果你想混合百分比和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
单位来衡量一切。这种方法确保了在任何宽度下的准确性