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

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

唯一的问题是你的类和伪元素的使用不是很语义。更好的方法是为您的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 }

或类似的东西。

使用“左”或“右”作为班级名称是非常不良做法 - 如果您以后决定要在右侧按下标题并在左侧按下该怎么办？您必须更改所有HTML，或者使用奇怪的CSS，其中.right位于左侧的元素，而.left位于右侧。

Answer 2

您正在做的事情似乎正在发挥作用（至少根据您如何描述您在这里寻找的内容）。我假设你的问题是选择器的复杂性？如果是这样，您可以尝试的一件事是将选择器移动到单个元素。我知道对于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>

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

修改

顺便说一句，如果问题是按钮向右移动多远，您可以将所有内容放在固定宽度的容器中，或者您可以向“右拉”类添加边距权限。对于固定宽度的容器，只需将ul包装在：
中
<div class="container">  </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;
}

希望这有助于：）

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

3 个答案: