Question

我没有找到涵盖我面临的确切问题的问题。香港专业教育学院只找到了关于我的问题的各个部分的对话 - 这是能够解决的 - 但不是我想要的确切事情。

我有一个水平菜单作为列表;元素的数量和内容很容易改变：

<div id="wrapper">
  <ul id="menu">
    <li>item 1</li>
    <li>another item</li>
    <li>an even longer item</li>
    <li>last item</li>
  </ul>
</div>

有这样的条件：

#wrapper{
  width: 940px;
}

现在，我需要li元素：

水平对齐
捕获#wrapper的完整可用宽度，同时对应于各自内容的长度
将其文本内容置于中心位置，同时使其与第一个文本内容保持对齐，例如右边对齐最后一个元素，加上所有文本元素之间的空格相等

这是布局草图：

layout sketch

橙色条是包含<ul>的#wrapper。蓝色和绿色线表示子<li>元素的宽度。如您所见，<li>从所包含文本的长度中取出它们的宽度。并且文本之间有相等的空格，同时仍然使第一个文本与左侧对齐，最后一个文本与右侧对齐。

因此我需要这个：

----------------------------- wrapper -----------------------------
------------------------------- ul --------------------------------
-- li --- ------- li ------- ----------- li ---------- ---- li ----
item 1   |   another item   |   an even longer item   |   last item

我知道我可以使用justify-content: space-between作为li元素，但是它们不会再占用#wrapper的整个可用空间，而只会覆盖它们的文本内容。

如果我使用flex-grow: 1，则会占用整个宽度，但元素的文本内容将不再与之间的空格对齐。

任何人都知道如何处理这个问题？

任何提示都表示赞赏！

欢呼声，

托马斯

Answer 1

如果您需要使用第一个左侧，最后一个需要使用此功能：

li:first-child{text-align: left;}
li:last-child{text-align: right;}

您可以使用this？

如何对flex-grow和justify-content进行排序：

1 个答案: