Question

我有一个我正在处理的网站..并且想知道如何在菜单栏中均匀地跨越菜单项。

我知道如何在技术上做到这一点，但我想确保它是正确的。

我希望能够添加另一个菜单项并使其看起来正常或溢出正确等等。

好的，所以我添加了

.wpsight-menu li {
    width:14%;
    text-align:center
}

（添加了更多菜单项）

我现在的问题是，完整的菜单项目现在不显示

http://phillysubrubanhome.com - 你可以看到它在做什么

Answer 1

使用CSS为您的锚点（a）提供左右相同的填充和边距以及li的百分比宽度，如下所示;

ul#main-menu {
   width: 100%;
}

ul#main-menu li {
   width: 20%; /* for 5 menu items */
   padding: 0;
   margin: 0;
   display: inline-block;
}

ul#main-menu li a {
   padding: 0px 5px;
   margin: 0px auto;
   display: block;
}

并根据菜单项的数量更改li的宽度。

这应该可以做到！

Answer 2

目前有5个菜单项，我假设您将添加另一个菜单项，从而使其成为6个菜单项。

容器的宽度为980px。将其分为6个部分，达到163.33。我们需要给出宽度百分比，即16.66％。

将每个li的宽度设置为16.66％并将文本居中对齐。

你的css如下：

ul#main-menu li{
    width:16.66%;
    text-align:center
}

Answer 3

好的，所以我将你的一个方法与此结合起来并且有效：

.wpsight-menu li {
    width:14%;
    text-align:center
}

.wpsight-menu a {
    display: inline-block;
    margin: 0 5px 0 0;
    text-decoration: none;
}

如何使菜单项均匀地跨菜单栏

3 个答案: