导航填充 100% 的容器答案

【问题标题】：Navigation fill 100% of container导航填充 100% 的容器
【发布时间】：2016-09-12 14:42:49
【问题描述】：

我正在使用我为我的页面调整的响应式导航代码。我正在寻找代码以将导航显示为全宽并匹配号召性用语按钮的宽度。问题是导航按钮都有不同长度的文本，但我仍然希望它跨越整个 div 以匹配其他按钮并提供平滑的盒装设计。我基本上希望它在桌面视图上看起来像这样：我也希望它在移动视图上像这样堆叠。（移动视图不需要任何调整，因为它对我来说看起来不错，我只需要桌面跨越它下方黑色 div 的整个宽度即可。

当我将宽度更改为#nav 时，它总是会敲击下方的按钮。

JSFiddle

#nav, #nav ul {
  display:block;
  list-style: none;
  margin-left:1%;
  padding: 0;
}

【问题讨论】：

标签： html css

【解决方案1】：

您可以通过为您的#nav 提供display: flex; 和width: 100%; 来完成此操作。然后，将flex-grow: 1; 和text-align: center; 分配给您的#nav > li

CSS

#nav {
    display: flex;
    width: 100%;
}

#nav > li {
    flex-grow: 1;
    text-align: center;
}

JSFiddle

结果

*注意不要忘记在媒体查询中为您的#nav 提供display: block;，以便它在较小的屏幕上垂直堆叠。

【讨论】：

这个选项唯一的坏处似乎是我失去了移动响应。即使使用我的 JQuery。
@Zachary 你看到底部的注释了吗？只需确保在媒体查询中将#nav 设置回display: block;。 Fiddle 已更新以表示这一点。
知道了！谢谢你。有什么办法可以保持按钮之间的白色小间隙？
你必须添加“display: -webkit-flex;”用于跨浏览兼容性。还有“-webkit-flex-grow: 1”
非常感谢！一旦我更新了我的代码，你的回答就完美了！

【解决方案2】：

使用 CSS 媒体查询实现它会更轻松：https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

在桌面视图或移动视图上显示两个不同的元素。要实现项目填充其父项的 100% 宽度，您可以使用 table、tr 和 td 轻松实现它

【讨论】：