拉伸水平UL以適應div的寬度

對於我的網站的主導航，有一個980像素寬的div，其主導航鏈接的ul爲。我正在嘗試使導航鏈接拉伸以均勻地適合div的寬度。拉伸水平UL以適應div的寬度

<div style="width: 980px;"> 
<ul id="horizontal-style"> 
    <li><a href="#">Nav Item</a></li> 
    <li><a href="#">Short Item</a></li> 
    <li><a href="#">Really Long Nav Item</a></li> 
    <li><a href="#">Nav Link</a></li> 
    <li><a href="#">Another Link</a></li> 
</ul> 
</div>

我正在做一些典型的css來使ul列表水平（float：left，display：block）。我可以調整li的填充距離以使其非常接近，但我真正需要的是一種使其自動伸展以適應的方式。可能？

編輯難度1：不能使用表格。難度2：每個導航項目將有不同的寬度以容納更長和更短的鏈接名稱。

來源

2011-03-03 Alan

這是爲了做到這一點的最簡單的方法：http://jsfiddle.net/thirtydot/jwJBd/

（或具有table-layout: fixed甚至寬度分佈：http://jsfiddle.net/thirtydot/jwJBd/59/）

這在IE7。

#horizontal-style { 
    display: table; 
    width: 100%; 
    /*table-layout: fixed;*/ 
} 
#horizontal-style li { 
    display: table-cell; 
} 
#horizontal-style a { 
    display: block; 
    border: 1px solid red; 
    text-align: center; 
    margin: 0 5px; 
    background: #999; 
}

_{老回答您的編輯前：http://jsfiddle.net/thirtydot/DsqWr/}

來源

2011-03-03 21:34:00 thirtydot

有沒有辦法做到這一點，但在菜單中的文本之間有間隙？現在的差距的大小取決於文本的長度... – inf3rno 2013-04-29 07:08:19

@ inf3rno：如果我理解正確，適應[this]（http://stackoverflow.com/questions/6865194/fluid-width-with-equally-間隔分隔）成菜單，它應該是你想要的。 – thirtydot 2013-05-07 09:08:17

多麼好的解決方案！非常感謝你的寬度分配！ +1 – Fonsini 2013-07-05 16:28:15

不雅（但有效）的方法：使用百分比

#horizontal-style { 
    width: 100%; 
} 

li { 
    width: 20%; 
}

這僅適用於與5 <li>例子。或多或少地修改你的百分比。如果您的網頁上有其他<li>，您可以隨時爲這些特定的人分配一類「menu-li」，以便只有這些人受到影響。

來源

2011-03-03 21:26:56 gailbear

另外，您可能需要考慮使用'display：inline-block;'屬性。然後你可以在ul上使用'text-align：center;'或類似的東西。 – gailbear 2011-03-03 21:28:07

謝謝，但我必須澄清，每個項目將是一個不同的寬度，以適應更長和更短的鏈接。更新了主帖。 – Alan 2011-03-03 21:35:46

人們討厭非表格數據，但你要求的正是表格擅長的。 <table width="100%">

來源

2011-03-03 21:27:45 Shad

我很樂意這樣做，但不能爲這個特定的網站。我同意，但他們並不像有人說的那樣糟糕！ – Alan 2011-03-03 21:31:08

#horizontal-style { 
    width: 100%; 
} 

li { 
    width: 20%; 
}

這種做法將不響應，因爲它會在屏幕最小的20％，這將是太小或其他方式覆蓋會在不同的斷點處進行媒體查詢。

來源

2016-01-26 00:02:02

拉伸水平UL以適應div的寬度

回答

相關問題