CSS：固定水平菜單，可變寬度選項卡，使用ul

我有一個水平菜單。標記看起來像這樣：CSS：固定水平菜單，可變寬度選項卡，使用ul

<ul class="menu"> 
    <li>Item 1</li> 
    <li>Longer Item 2</li> 
    <li>Item 3</li> 
</ul>

子菜單和suckerfish下拉菜單將在稍後。

ul需要跨越頁面的寬度（例如100％或1000px）。

lis根據其內容應該有所不同。

所以結果是這樣的：

-----------------100% of page------------ 
|--Item 1--|--Longer item 2--|--Item 3--|

現在很容易通過固定每個L1標籤寬度要做到這一點，但因爲菜單將CMS驅動我需要允許的寬度選項卡會自動變化。與表這將是微不足道的，但我想不出一種方式來做到這一點與ul。

來源

2009-12-07 cbp

這裏是我的jQuery的解決方案：

var actualWidth = 1000; 
var totalLIWidth = 0; 

// Calculate total width of list items 
var lis = $('ul li'); 

lis.each(function(){ 
    totalLIWidth += $(this).width(); 
}); 

// Work out how much padding we need 
var requiredPadding = Math.round(((actualWidth-totalLIWidth)/lis.length)/2); 

// To account for rounding errors, the error is going to be forced into the first tab. 
var roundingErrorFix = (requiredPadding*lis.length*2)+totalLIWidth-actualWidth; 

// Apply padding to list items 
lis.each(function(i) { 
    if(i==0) { 
     $(this).css('padding-left',requiredPadding-roundingErrorFix+'px') 
      .css('padding-right',requiredPadding-roundingErrorFix+'px'); 
    } 
    else { 
     $(this).css('padding-left',requiredPadding+'px') 
      .css('padding-right',requiredPadding+'px'); 
    } 
});

來源

2009-12-07 12:59:35 cbp

好的解決方案，但它只適用於在將「roundingErrorFix」除以2之前將其應用於第一個項目之前。 – 2011-08-16 21:50:37

偉大的答案 - 要注意的一件事是，列表項的寬度不包括邊界，所以添加邊界到第10行totalLIWidth（在lis.each循環之後）。 – 2011-12-14 13:23:50

-1

如果您嘗試對ul進行樣式設置（例如，它橫跨整個頁面），最好的方法是將其封裝在div中，並設置div的樣式，然後讓ul只能拉伸其內容拿它

來源

2009-12-07 10:51:51 LorenVS

這是

顯示的情況：表曼

ul { 
    display: table; 
    width: 100%; 
    table-layout: fixed; 
} 
li { 
    display: table-cell; 
}

不幸的是，你應該放棄支持IE的6和7的想法，但沒有別的，這是要走的路（或開對HTML表格，這可能會或可能不會遠離標記的語義內容）。

來源

2009-12-07 10:52:08 Boldewyn

+1爆笑.... – 2009-12-07 11:01:51

感謝 - 當然，我需要至少IE 7支持:) – cbp 2009-12-07 11:45:27

Boldewyn的回答沒有任何的工作！我的測試 - 結果的列表項目都是相同的寬度。 – rda3000 2011-04-18 17:33:58

如果您使用JavaScript很高興，jQuery的可以解決問題如下

var $menu, totalwidth; 

$menu = $('ul.menu'); 
totalwidth = ($menu.width()/100); 

$('ul.menu li').each(function(){ 
    this.css('width',String(Math.floor(this.width()/totalwidth))+'%'); 
}); 

$menu.css('width','100%');

這是未經測試，但權在我看來。評論你是否有任何問題。

來源

2009-12-07 10:57:30 Gausie

明確的字符串轉換是不必要的，但除此之外，你擊敗了我; – 2009-12-07 10:59:55

這可能最終會變得比這更復雜：$ menu.width（）將是100％（儘管您獲得的實際值將以像素爲單位），除非你浮動UL，因爲UL是一個塊元素。所以你將不得不漂浮UL，以獲得正確的總寬度值。或者你可以通過首先總結LI元素的寬度然後再次通過它們來調整到新的寬度來獲得總寬度。 – wheresrhys 2009-12-07 11:13:12

這是我的第一個想法，但我不想做兩個循環... 浮動和展開聽起來像一個安全的賭注，但是，我應該編輯我的代碼？ – Gausie 2009-12-07 11:16:25

我認爲boldewyn的建議應該起作用。我將這種方法用於現代瀏覽器，然後使用條件註釋將以下內容提供給ie6/7，以便導航在那裏看起來不錯，但不會跨越100％的寬度。

ul { 
    width: 100%; 
} 
li { 
    float:left; // or display:inline-block; 
}

來源

2009-12-07 11:03:45 wheresrhys

CSS：固定水平菜單，可變寬度選項卡，使用ul

回答

相關問題