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

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

但我有一种不好的感觉，我做错了什么。 这个问题有更好的方法/解决方案吗？

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

<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 定位在右侧。

Answer 2

您正在做的事情似乎正在发挥作用（至少根据您如何描述您在此处寻找的内容）。我假设您的问题是选择器的复杂性？如果是这样，您可以尝试的一件事是将选择器移动到单个元素。我知道他们称之为引导程序，所以我继续这样做：

<ul class="dual-align-list">
    <!-- Title really only needs to be in a div if you
         plan on styling it further -->
    <li> Title <div class="pull-right">[button]</div></li>
    <li> Title <div class="pull-right">[button]</div></li>
</ul>

请参阅 this JSFiddle 以获取其中的工作示例。希望这能解决实际问题！

编辑

顺便说一句，如果问题只是按钮向右移动多远，您可以将所有内容放在一个固定宽度的容器中，或者您可以在“pull-right”类中添加一个margin-right。对于固定宽度的容器，只需将 ul 包裹在：

<div class="container"> <!-- "ul" here --> </div>

您还需要以下样式规则：

/* edited to use percents for a responsive layout */
.container { margin-left: 5%; margin-right: 5% }

我把它放在对上一个小提琴 you can find here 的更新中。希望这也能帮助一些人。祝你好运！

编辑（2）

将固定宽度布局更改为具有 5% 边距的响应式布局。这些可以根据所需的结果进行调整，甚至可以使用@media 元素设置样式以根据屏幕大小而变化！

Answer 3

试试这个：

HTML

<ul class="dual-align-list">
    <li>
        <div class="left">Title</div>
        <div class="right">[button]</div>
    </li>
    <li>
        <div class="left">Title</div>
        <div class="right">[button]</div>
    </li>
</ul>

CSS

ul.dual-align-list li {
    display: block;
    height: 25px;
    position: relative;
}
ul.dual-align-list li .left {
    text-align: left;
    position: absolute;
    left:0;
}
ul.dual-align-list li .right {
    text-align: right;
    position: absolute;
    right:0;
}

希望这会有所帮助:)