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

Question

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

结构很简单:

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 元素内居中，因此左右两边都有一些空间。我正在尝试使文本“接触”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>