如何在項目之間創建一個可變空間的超大菜單

想法是製作一個包含固定數量項目的菜單。每個物品都必須有固定的填充物，以便在圍繞它們放置邊框時使它們看起來不錯。（迄今爲止非常好）但是，這些商品必須以固定尺寸的div展開，均勻間隔 - 商品本身的尺寸不一定取決於這些商品中的文字。如何在項目之間創建一個可變空間的超大菜單

我無法弄清楚的是如何確保項目在固定格（在我的情況下爲1000px）內的動態（或多或少）均勻間距的1行上。第一個項目應該排列在div的左邊緣。最後一項應該排列在div的右邊緣。

以下是我到目前爲止。這已經把填充和邊框放在它上面，但我不能設置一個邊距：0自動，我可以，但它什麼都不做。主要問題是兩者之間的間距應該是動態的，因爲這些項目在縮放瀏覽器時往往會跳躍，這又會擾亂外部項目的對齊，甚至會使一些項目跳到下一行。這就是爲什麼（縮放混亂的東西 - 尤其是固定的寬度）我不願意把每個項目的實際寬度（我知道我需要一個寬度來使用margin：0自動適當，但即使當我使用寬度，它似乎沒有做我想做的事）。

<div id="navigation"> 
    <ul> 
     <li class="menu-1"><a href="" >Home</a></li> 
     <li class="menu-2"><a href="" class="">Nieuws</a></li> 
     <li class="menu-3"><a href="" class="">Producten</a></li> 
     <li class="menu-4"><a href="" class="">Algemene informatie</a></li> 
     <li class="menu-5"><a href="" class="">Promoties</a></li> 
     <li class="menu-6"><a href="" class="">Algemene voorwaarden</a></li> 
     <li class="menu-7"><a href="" class="">Contact</a></li> 
    </ul> 
</div> 

#navigation ul { 
    margin:0px; 
    padding:0px; 
    list-style:none; 
    width:1000px; 
    display:block; 
} 

#navigation li { 
    float: left; 
    display:inline; 
} 

#navigation li a { 
    padding:10px 15px 10px 15px; 
    float:right; 

    display: block; 
    border: 0.1em solid #dcdce9; 
    color: #6d6f71; 
    text-decoration: none; 
    text-align: center; 
    font-size:18px; 
    font-weight:bold; 
} 

#navigation{ 
    width:100%; 
}

來源

2012-05-24 3xil3

的Flexbox的模式將解決這個問題，最終會。 – Neil

最簡單的辦法是使用一個表，而不是李項：您可以定義表格的寬度和單元格寬度將自動計算。

您可以選擇以百分比表示寬度，讓它們相等或決定讓它們按比例調整。

不需要害怕表格：有時候他們會把工作做得更簡單。

來源

2012-05-24 20:57:14

根據最初的規範，您需要用空單元格替換菜單單元格（需要縮小換行）（這需要爲剩餘空間相互爭奪）。 – Neil

或帶邊框和邊距，或跨越細胞，取決於最終的預期效果。但是，當然補充細胞可能是有用的。 –

我一直認爲使用表格作爲不良表格是非常困難的做法，但是值得考慮，因爲沒有其他解決方案接近我需要的版本 – 3xil3

使用表顯示模式：http://jsfiddle.net/pnUdp/1/

#navigation { 
    margin:0px; 
    padding:0px; 
    display:table; 
    width:1000px; 
    border-collapse: collapse; 
} 

#navigation ul{ 
    margin:0px; 
    padding:0px; 
    list-style:none; 
    display:table-row-group; 
} 

#navigation li{ 
    display:table-cell; 
    border: 0.1em solid #dcdce9; 
    vertical-align: middle; 
} 

#navigation li a{ 
    padding:10px 15px 10px 15px; 
    display:block; 
    color: #6d6f71; 
    text-decoration: none; 
    text-align: center; 
    font-size:18px; 
    font-weight:bold; 
}

我不確定如何跨瀏覽器，這是雖然...

來源

2012-05-24 21:03:19

如何動態地在物品間平均分配間距？此代碼將項目放入單行中，而項目之間沒有間距。我用float：left版本實現了同樣的效果，但我無法弄清楚如何實現項目之間的自動間距 – 3xil3

我調整了CSS以允許元素之間的間距：http：// jsfiddle。 net/pnUdp/7/- 請注意，如果任何文本分成兩行，事情會變得很奇怪。 –

如何在項目之間創建一個可變空間的超大菜單

回答

相關問題