时间戳

首页 > 解决方案 > 如何使 html 菜单文本从头到尾跨度 100%

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

问题描述

我正在尝试创建一个导航菜单，其中共有 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 代码时，它看起来像这样：

在此处输入图像描述

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

标签： htmlcssmenuflexbox

解决方案

从. flex: 1_ li您不希望元素增长，因为这会阻止文本到达末端。

添加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>

推荐阅读