Question

我如何对齐这些复选标记，使它们位于同一行，一个在另一个之下，紧接在左侧最长的选项之后。

<ul class="list-line-bold list-unstyled">
<li>Option 1: Unlimited</li>
<li>Option 123312: <span class="check"></span>
</li>
<li>Option 134: <span class="check"></span>
</li>
<li>Option 1: <span class="check"></span>
</li>
<li>Option 1423423423423: <span class="check"></span>
</li>

.list-unstyled {
    padding-left: 0;
    list-style: none;
}
.check {
    background-image: url(http://i.imgur.com/AfPGFCp.png);
    display: inline-block;
    width: 14px;
    height: 14px;
    background-repeat: no-repeat;
    vertical-align: middle;
}

Answer 1

试试这个：

.list-unstyled {
    padding-left: 0;
    list-style: none;
}
.check {
    background-image: url(http://i.imgur.com/AfPGFCp.png);
    display: inline-block;
    width: 14px;
    height: 14px;
    background-repeat: no-repeat;
    vertical-align: middle;
    float:right;
}
li{
    width:200px;
}

Answer 2

您可以将.check元素向右浮动，并在li

上具有最大宽度

以下是一个示例：http://jsfiddle.net/e8QXm/

Answer 3

Demo

将width: 400px提供给<li>，将float: right提交给.check

如何在<li> </li> </span>内对齐多个<span>

3 个答案: