我试图将 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/
预先感谢任何提示!
最佳答案
这是解决方案: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>
关于css - float 2 个元素并排放置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11281772/