全宽水平导航

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;

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

从那里开始，我们想要缩小子菜单项，使它们水平移动。为此，我们需要删除：

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;
}