全宽水平导航

Question

我目前有一个伪全宽水平导航，它是通过在每个列表元素上设置边距来创建的，这会导致导航扩展为几乎全宽。这样做的问题是，如果导航中的任何内容发生变化，它将中断，我将不得不找出新的确切边距以使其扩展到全宽。此外，不同的浏览器会稍微改变我的文本和其他内容的大小，这意味着一个浏览器中的全角在另一个浏览器中太大（并中断到另一行）。

所以我正在尝试为此找出更好的解决方案。我有一个适用于顶级导航项的解决方案，其中涉及更改以下 CSS：

ul.menu {
    list-style-type: none;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    display: table;
}

ul.menu > li:first-child {
    padding-left: 0;
}

ul.menu > li:last-child {
    padding-right: 0;
}

ul.menu li {
    padding: 12px;
    display: table-cell;
    text-align: center;
}

ul.menu li a {
    padding: 12px 0;
    margin: auto;
}

结果如下：

这似乎工作得很好，但不幸的是（并且可以预见），它弄乱了子菜单，现在看起来像这样：

多年来，我一直在玩弄子菜单 CSS，试图让它像以前一样工作，但没有成功。

有谁知道我需要在此处进行哪些更改才能使顶级元素的全宽度导航正常工作，同时使子菜单保持原样？

Answer 1

我想我理解你，但让我们看看我是否可以在解释时帮助你到达那里（或至少更接近）。

要获得“全宽”，您需要确保您的容器元素具有：

position:relative 或 position:absolute

你当前的 CSS 有

.container {
  position: relative;
  /* ... */

这很好。这意味着我们可以将子元素定位在这个盒子中，这样我们就可以获得“全宽”，可以这么说。

现在我们要确保没有更低的子元素取代这条规则。 有一个！我们要删除这个位：

ul.menu li {
  position: relative; /* remove */
  /* ... */

这将导致子菜单包含在父 li 中，当我们尝试使其填充整个菜单栏的宽度时会导致一些问题。

接下来是调整子菜单。这个选择器：

ul.menu li ul.sub-menu{ /*... */ }

我们希望子菜单是全宽的，所以我们添加：

width:100%;

现在，我们已经有了min-width:100%，但我更喜欢坚持使用width，尤其是如果我们知道我们将要使用100%。也许是我的旧 IE6 骨痒痒，但也许是有原因的。它应该可以在现代浏览器中运行，而无需添加width:100%。所以，对这一点持保留态度。

接下来，我们要通过添加来定位子菜单：

left:0;
top:4.5em;

这应该将子菜单的整个宽度放在主菜单的宽度上，并将其放在主菜单下方。根据您的设计需求，可能需要一些轻微的 tweeks。

从那里，我们想要展平子菜单项，使它们水平排列。为此，我们需要删除：

ul.menu li ul.sub-menu li {
    width: 100%; /* remove */
    /* ... */

和

ul.menu li ul.sub-menu li a{
    /* ... */
    display:block; /* remove */
    /* ... */

否则，子菜单项将填满整个空间，我们将回到垂直设计。

我认为这就是我为获得“全宽”水平子菜单栏所做的一切。我希望这就是你要找的。看起来你已经很好地解决了垂直子菜单。

不过，我会跨浏览器测试此解决方案。我只在 Chrome 的开发者工具中进行了修改。

（我希望我不会错过任何我的开发者工具编辑）

这可能无法让您一路走好，但希望对您有所帮助！

干杯！

ps。我确实注意到两个问题。项目数量有限的子菜单往往会感觉被左侧挤压。包含大量项目的子菜单将换行。

这可能没问题，或者您可能想考虑为小菜单添加一个额外的类，以便更好地分散项目。

Answer 2

更新这个。希望它能解决你的问题。

ul.menu > li {
    padding: 12px;
    display: table-cell;
    text-align: center;
}