css - 全宽水平导航

Question

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

所以我正在尝试为此找出一个更好的解决方案。我有一个适用于顶级导航项的解决方案，其中涉及更改以下 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 的开发者工具中修改过。

(我希望我没有错过任何我的开发者工具编辑)

这可能不会让您一路走下去，但希望对您有所帮助!

干杯!

附言。我确实注意到两个问题。元素数量有限的子菜单往往会被左侧压扁。包含大量元素的子菜单将换行。

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