分配百分比寬度的標籤，而他們有邊框

請考慮以下幾點：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

分配百分比寬度的標籤，而他們有邊框

回答

相關問題