对齐列表项答案

【问题标题】：Aligning list items对齐列表项
【发布时间】：2021-02-22 01:55:50
【问题描述】：

我有一个看起来像这样的两列列表

我需要第二列的列表项始终与列表的右边框对齐，但不是文本右对齐，但像这样：

所以单词最长的项目实际上是文本向右对齐的，但其他较短的项目从最长的项目开始的地方开始。到目前为止的css列表是

ul{
    column-count:2;
}

【问题讨论】：

标签： css list css-multicolumn-layout

【解决方案1】：

如果您愿意在父容器中使用两个列表，则可以使用 flexbox。 margin-left: auto 在这种情况下将元素移动到容器的末尾。请务必指定父级的宽度，以便它知道要对齐的内容！见https://css-tricks.com/snippets/css/a-guide-to-flexbox/

<div style="width:100%; display: flex; flex-direction: row">
    <ul style="">
        <li>item</li>
        <li>item</li>
        <li>item</li>
    </ul>
    <ul style="margin-left: auto">
        <li>item</li>
        <li>item</li>
        <li>item</li>
    </ul>

</div>

【讨论】：

嗯..我不想使用额外的 div 和类...
@rogerk 这里没有任何课程。这比 ul 上的 CSS 解决方法更干净。要在没有两个容器的情况下实现您想要做的事情，您必须在第二列 li 元素上使用 text-align 或类似的东西。