Html 列表项的一部分'；s文本左对齐，其余文本右对齐

我希望将

内容的一部分对齐到左侧（“标题”），其余部分对齐到右侧（“按钮”）。每一项

我正在使用以下

HTML

代码：

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

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

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

</ul>

但是我有一种不好的感觉，我在做一些非常错误的事情

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

试试这个：

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>

---

希望这能有所帮助：）

你所做的似乎是有效的（至少按照你描述你在这里寻找什么的方式）。我假设你的问题是选择器的复杂性？如果是这样，可以尝试将选择器移动到单个元素。我知道对于bootstrap，他们称之为向右拉动，所以我继续这样做：

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

我把它放在了之前小提琴的更新中。希望这对一些人也有帮助。祝你好运

编辑（2）

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

但是我有一种不好的感觉，我在做一些非常错误的事情。 有没有更好的方法/解决这个问题的方法

唯一的问题是您的类和伪元素的使用不是很语义化。更好的方法是为

div

s提供描述其内容的类，并以这种方式设置它们的样式

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

或者类似的东西

---

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

。right

将元素放置在左侧，而

。left

放置在右侧。

您的代码可以工作>。有什么问题？@3rror404是的，我知道它有效！：]你有没有注意到最后两句话：“但我有一种不好的感觉，我做了一些非常错误的事情。有没有更好的方法/解决这个问题的方法？”。我试着让自己确信，它不仅可以工作，而且在语义上也可以，并且遵循现代标准。在哪方面你的代码比我的好？除此之外，您使用的是绝对定位，这是一个非常糟糕的想法，因为它使用了不必要的

作为标题（实际上，不需要样式）和制作JSFIDLE。至于你的编辑——不。这是一个流动的主题，所以不允许固定宽度。再次感谢！即使使用固定宽度，如果需要边距，也可以使用百分比进行样式设置。我将相应地更新Joshua，我没有使用

左

和

右

作为类名！这来自上面的答案，而不是我的问题！：]对我来说，这和你一样显而易见。顺便说一句：类而不是伪元素的想法听起来很有趣，谢谢<代码>…使用“左”或“右”是非常糟糕的做法真的吗？Bootstrap和它的狂热追随者会不同意。Bootstrap包括使用良好的类

pull left

和

pull right

。由于开发人员无法在其源代码中找到替换类名而不使用类名

left

，这不是不使用它们的有效原因。实际上，给许多元素指定它们自己的单独类名而不是使用可重用类名（如

pull left

和

pull right

）是一种不好的做法。引导程序做什么并不重要，重要的是类名和元素是否具有语义，并给类指定一个

div

“right”绝对不是。Bootstrap可以做任何它喜欢做的事情，这并不能使他们所做的事情成为良好的实践。

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

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

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

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

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 }