Question

我正在处理我为我的网页调整过的响应式导航代码。我希望获得代码以将导航显示为全宽并匹配“号召性用语”按钮的宽度。问题是导航按钮都有不同长度的文本，但我仍然希望它跨越整个div以匹配其他按钮并给出流畅的盒装设计。我基本上希望它在桌面视图上看起来像这样：我还希望它在移动视图上这样堆叠。（移动视图不应该需要任何调整，因为它对我来说很好，我只需要桌面跨越它下面的黑色div的整个宽度。

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

JSFiddle

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

Answer 1

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

<强> CSS

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

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

<强> JSFiddle

<强>结果

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

Answer 2

使用CSS媒体查询实现它不会那么痛苦：https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

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

导航填充100％的容器

2 个答案: