html - 如何在 中对齐多个

Question

JSFIDDLE DEMO

我怎样才能对齐这些复选标记，使它们在同一行中，一个在另一个下面，紧跟在左侧最长的选项之后。

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