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

如果您希望每个菜单项具有相同的宽度，您应该使用display：table，如您在此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更改菜单样式，移除table-layout: fixed;以获得可读性，但项目宽度相等，或重新组织菜单。

用浮动获取e菜单

2 个答案: