得到與浮動菜單

Question

我想要一個這樣的菜單：menssana.be/FOOD/

但這不是用浮動。當我調整我的屏幕時，它不可讀。
所以我想使它與浮動，但我不能把它正確。
總有一些錯誤。
有人可以給我一些提示

我的代碼是：

#active { 
    /* color:#FFFFFF; 
     background-color: #1A1718; */ 
} 
#menu { 
    margin-top: -1%; 
    width: 100%; 
    background-color: #D3D5D7; 
    color: #000000; 
    text-align: center; 
} 
menu ul { 
} 
#menu a { 
    color:#000000; 
    display: block; 
    min-height: 25px; 
    width: 100%; 
    text-decoration: none; 
    line-height: 25px; 
} 
#menu a:hover { 
    color:#FFFFFF; 
    background-color: #1A1718; 
} 
#menu li { 
    list-style: none; 
    display: inline-block; 
} 
.link { 
    width: 11%; 
} 

    <div id ="menu"> 
    <ul> 
     <li class ="link"><a class ="active" href ="index.php">Home</a></li> 
     <li>|</li> 
     <li class ="link"><a href ="samenstellingen.php">Samenstellingen</a></li> 
     <li>|</li> 
     <li class ="link"><a href ="panini.php">Panini's</a></li> 
     <li>|</li> 
     <li class ="link"><a href ="soep.php">Soep</a></li> 
     <li>|</li> 
     <li class ="link"><a href ="beleg.php">Beleg</a></li> 
     <li>|</li> 
     <li class ="link"><a href ="contact.php">Contact</a></li> 
     <li>|</li> 
     <li class ="link"><a href ="../WELNESS/index.php">Schoonheidssalon</a></li> 
    </ul> 
</div> 

感謝您的幫助。

Answer 1

如果我理解得很清楚您的菜單不可讀，因爲重疊了元素，那麼當屏幕尺寸太小時，您需要換行。試試這個：

.link{ 
    /*width: 11%; Remove this*/ 
    min-width:11%; /*Include this*/ 
} 

Answer 2

如果你希望每個菜單項具有相等的寬度，你應該顯示去：表作爲您可以在此看到JsFiddle。我已經重新命名了一些ids/class，因爲it’s better to style with classes並清理了你的代碼。

<ul class="nav"> 
    <li><a class="active" href="index.php">Home</a></li> 
    <li><a href="samenstellingen.php">Samenstellingen</a></li> 
    <li><a href="panini.php">Panini's</a></li> 
    <li><a href="soep.php">Soep</a></li> 
    <li><a href="beleg.php">Beleg</a></li> 
    <li><a href="contact.php">Contact</a></li> 
    <li><a href="../WELNESS/index.php">Schoonheidssalon</a></li> 
</ul> 

CSS

.nav { 
    display: table; 
    table-layout: fixed; 
    width: 100%; 
    margin: 0; 
    padding: 0; 
    background-color: #D3D5D7; 
    color: #000000; 
} 
.nav li { 
    display: table-cell; 
    text-align: center; 
} 
.nav li + li { 
    border-left: 1px solid #000; 
} 
.nav a { 
    color:#000000; 
    display: block; 
    padding: 0 5px; 
    text-decoration: none; 
    line-height: 25px; 
    overflow: hidden; 
} 
.nav a:hover { 
    color:#FFFFFF; 
    background-color: #1A1718; 
} 

但它仍然不是完美的小屏幕上是由於你的菜單項的數量以及這些詞語的長度。因此，您可以決定在小屏幕上使用media-queries更改菜單樣式，刪除以獲得可讀性，但寬鬆的項目寬度相同，或重新整理菜單。