如何使 html 菜单文本从头到尾跨度 100%

Question

我正在尝试创建一个总计 5 link 到其他页面的导航菜单。我不知道如何让文本从一端跨越到另一端，所以它占据了页面的整个宽度，同时又很灵活。

结构很简单：

ul {
    display: flex;
    justify-content: center;
    width: 100%;
}
ul li {
    display: inline-block;
    text-align: center;
    flex: 1;
    justify-content: space-between;
}
ul li a {
    display: inline-block;
    width: 100%;
    font-size: 16px;
    font-weight: 300;
    color: #070707;
}

<ul>
    <li><a href="">Contact us</a></li>
    <li><a href="">Delivery</a></li>
    <li><a href="">About us</a></li>
    <li><a href="">Terms &amp; Conditions</a></li>
    <li><a href="">Returns</a></li>
</ul>

这行得通，但由于文本在每个 li 元素内居中，因此左右各有一些 space。我正在尝试使文本 "touch" 成为 ul 元素的边缘（占据父元素的 100% 宽度）。因此，如果 ul 元素的宽度为 1240px，我试图让文本从头到尾占据 1240px。

这是我在 photoshop 中制作页面模型时的样子：

蓝线是边缘（其中一条表示中间）。

当我使用我写的flexbox代码时，它是这样的：

有没有办法让它看起来像我最初想要的那样？

Answer 1

从 li 中删除 flex: 1。您不希望元素增长，因为这会阻止文本到达四肢。

将 justify-content: space-between; 添加到 ul。您当前正在使元素居中，这会使它们聚集在一起。

您还需要删除默认的 ul 填充，但大概您已经在这样做了。

body {
    outline: 1px dashed lightBlue;
}

ul {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 0;
}
ul li {
    display: inline-block;
    outline: 1px solid orange;
}
ul li a {
    display: inline-block;
    width: 100%;
    font-size: 16px;
    font-weight: 300;
    color: #070707;
}

<ul>
    <li><a href="">Contact us</a></li>
    <li><a href="">Delivery</a></li>
    <li><a href="">About us</a></li>
    <li><a href="">Terms &amp; Conditions</a></li>
    <li><a href="">Returns</a></li>
</ul>

Answer 2

列表元素有缩进以便为标记腾出空间。

ul {
  display: flex;
}

ul li {
  text-align: center;
  flex: 1;
}

ul li a {
  font-size: 16px;
  font-weight: 300;
  color: #070707;
}

<ul>
  <li><a href="">Contact us</a></li>
  <li><a href="">Delivery</a></li>
  <li><a href="">About us</a></li>
  <li><a href="">Terms &amp; Conditions</a></li>
  <li><a href="">Returns</a></li>
</ul>

删除列表元素上的默认 space。（另外，您的很多代码都不是必需的。）

ul {
  display: flex;

  /* new */
  list-style: none;
  margin: 0;
  padding: 0;
}

ul li {
  flex: 1;
  
  /* for demo */
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px dashed black;

}

ul li a {
  font-size: 16px;
  font-weight: 300;
  color: #070707;
}

<ul>
  <li><a href="">Contact us</a></li>
  <li><a href="">Delivery</a></li>
  <li><a href="">About us</a></li>
  <li><a href="">Terms &amp; Conditions</a></li>
  <li><a href="">Returns</a></li>
</ul>

更好的是，还要清理 HTML。摆脱列表元素并使用更简单且语义上有价值的 nav 元素。

nav {
  display: flex;
}

a {
  flex: 1;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  color: #070707;
  border: 1px dashed black;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

<nav>
  <a href="">Contact us</a>
  <a href="">Delivery</a>
  <a href="">About us</a>
  <a href="">Terms &amp; Conditions</a>
  <a href="">Returns</a>
</nav>

Answer 3

这个codesandbox CSS中的returns你似乎想要什么（它使用React，但对于CSS：https://codesandbox.io/s/wandering-sound-1cme5

我看到的重点：

将 body 的边距设置为 0。一般来说，为了确保跨浏览器的样式一致，您可能需要使用像这样的规范化工具：https://necolas.github.io/normalize.css/, or a complete reset like this : https://meyerweb.com/eric/tools/css/reset/ 来解决这个问题一种基线样式。
删除 text-align: center。如果您使用 justify-content: space-between
仅在 flex 包装器上使用 justify-content: space-between (ul)
通过设置 padding-left: 0

ul

li 上的样式大多是不必要的，afaik，只有 list-style: none; 应该是您需要的。

Answer 4

保留您的 flexbox 代码并使用 justify-content: space-between;，因此您的项目将如下所示：

只是不要忘记确保您的 flexbox 方向设置为 "row"。

额外提示：由于您正在制作导航栏，请不要忘记使用 <nav> 标签以获得更好的 html 语义和可访问性。 http://html5doctor.com/nav-element/

如何使 html 菜单文本从头到尾跨度 100%

How to make html menu text span 100% from end to end

html

css

menu

flexbox