相同寬度的子跨度

我試圖用<span>表示的元素創建水平菜單。菜單本身（父母<div>）具有固定寬度，但元素數量總是不同。相同寬度的子跨度

我想有孩子<span>的寬度相同，不管他們有多少人在那裏。

我到目前爲止所做的：爲每個跨度添加了一個float: left;樣式，並指定了其百分比寬度（百分比或多或少都是正常的，正如服務器在生成頁面時知道的那樣，有多少菜單項存在並可以通過這個數字來劃分100％）。這是有效的，除了我們有一個除法餘數的情況（如3個元素），在這種情況下，我有一個像素的洞在父親<div>的右邊，如果我四捨五入百分比，最後一個菜單元素被包裹。我也不太喜歡隨時隨地創作風格，但如果沒有其他解決方案，那就沒問題。

我還能嘗試什麼？

看起來這是一個非常普遍的問題，但是對於「同樣寬度的子元素」的搜索並沒有幫助。

來源

2008-09-06 Sergey Mikhanov

你可以嘗試用一個固定的表格佈局的表。它應該計算列寬而不關心單元內容。

table.ClassName { 
    table-layout: fixed 
}

來源

2008-09-06 13:42:53 sblundy

當人們對所有東西都使用表格時（因爲CSS還不存在），這很糟糕。現在，它有時候相反。有人會描述一個表的功能，並詢問如何在沒有表的情況下完成它，就好像表本身就是壞的一樣。嘆。 – 2008-09-06 15:11:11

如果你有一個固定寬度的容器，那麼你正在失去一些百分比寬度子跨度的一些有效性。

對於您33％的情況，您可以在第一個和第四個孩子跨度中添加一個班級，以根據需要設置正確的寬度。

<div> 
<span class="first-in-row">/<span><span></span><span></span><span class="first-in-row"><span></span><span></span>... 
</div>

其中

.first-in-row { width:auto; /* or */ width:XXX px; }

來源

2008-09-06 13:42:43 Xian

您是否嘗試過十進制值，例如將寬度設置爲33.33％？

如在CSS語法指定，width屬性（http://www.w3.org/TR/CSS21/visudet.html#the-width-property）可被給定爲<百分比>（http://www.w3.org/TR/CSS21/syndata.html#value-def-percentage），其被描述爲一個<數>。

截至數量定義（http://www.w3.org/TR/CSS21/syndata.html#value-def-number）說，有一些值類型必須是整數，並表示爲<整數>，其餘都是實數，表示爲<數>。百分比定義爲<號碼>，而不是<整數>所以它可能工作。

這將取決於瀏覽器的能力來解決這種情況，如果它不能分開父母的盒子沒有剩餘，它會畫一個1或2像素的空間，或使1或2跨度三比其餘的更寬。

來源

2008-09-06 13:58:37 zappan

提到西安的答案，還有：第一胎子假元素。而不是一流的課程，你會有這個。

span:first-child { 
    width: auto; 
}

很明顯，這隻適用於單行菜單。

來源

2008-09-06 14:27:35 sblundy

相同寬度的子跨度

回答

相關問題