html - 列表项的部分文本左对齐，其余部分右对齐

Question

我想要 <li> 的一部分内容左对齐(“标题”)，其余部分(“[按钮]”)右对齐。对于每个元素。

我正在使用以下 HTML代码:

<ul class="dual-align-list">

    <li><div>Title</div><div>[button]</div></li>

    <li><div>Title</div><div>[button]</div></li>

</ul>

和样式:

ul.dual-align-list li
{
    display: block;
    height: 25px;
}

ul.dual-align-list li div:first-child {float: left}

ul.dual-align-list li div:nth-child(2) {float: right}

但我有一种不好的预感，我做错了什么。

这个问题有更好的方法/解决方案吗？

Answer 1

But I have a bad feeling, that I'm doing something really wrong. Is there a better approach/solution to this problem?

唯一的问题是你的类和伪元素的使用不是很语义化。更好的方法是为您的 div 提供描述其内容的类，并以这种方式设置它们的样式。

<ul class="title-content-list">
    <li><div class="title">Title</div><div class="content">[button]</div></li>
</ul>

和 CSS

ul.title-content-list > li { display: block; height: 25px; }
ul.title-content-list > li > div.title { float: left }
ul.title-content-list > li > div.content { float: right }

或者类似的东西。

使用“left”或“right”作为类名是非常不好的做法 - 如果您稍后决定要将标题放在右边，将按钮放在左边怎么办？您必须更改所有 HTML，或者使用奇怪的 CSS，其中 .right 将元素放在左侧，.left 放在右侧。