css - float 2 个元素并排放置

Question

我试图将 li 列表中的两个元素放在右侧彼此相邻的位置以获得结果:
一些文本......................A...B

不幸的是，顺序让我发疯。

这是html代码:

<ul class="list">
<li>some text 
     <small class="a">A</small>
     <small class="b">B</small>
</li>
</ul>

使用下面的 CSS 代码，我能够使右侧的小元素彼此相邻，但结果是我在右侧看到 B 紧挨着 A!

.list li{
    background-color:#282828;
    color:#ffffff;
    font-size:20px;
    text-transform:uppercase;
    padding-left:5px;
 }


 .list small.a {
    display:inline;
    float:right;
 }


 .list small.b {
    display:inline;
    float:right;
 }

所以，我的目标是:
一些 tex......................A...B

但例如它看起来像:
一些文本......................B...A

看这里的例子 --> http://jsfiddle.net/LKVdE/

预先感谢任何提示!

Answer 1

这是解决方案:http://jsfiddle.net/surendraVsingh/LKVdE/1/

CSS

.list small.a {
    background-color: #000000;
    display: inline;
}
.list small.b {
    background-color: #ff0000;
    display: inline;
}
.list li span{
    display: inline-block;
    float: right;
}

HTML

<ul class="list">
     <li>Brennwert kJ / kcal
         <span>
            <small class="a">1109kJ / 261kcal</small>
            <small class="b">455kJ / 107kcal</small>
         </span>
     </li>
</ul>