相邻浮动2元素
相邻浮动2元素
提问于 2012-07-01 12:00:48
我试着在安莉的名单中把两个元素放在右边并排，这样就能得到结果：
一些文本.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;
}因此，我的目标是：
A.B
但举个例子，它看起来像：
一些文本.B.A
参见这里的示例 --> http://jsfiddle.net/LKVdE/
谢谢你的建议！
回答 3
Stack Overflow用户
回答已采纳
发布于 2012-07-01 12:06:57
以下是解决方案：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;
}<ul class="list">
<li>Brennwert kJ / kcal
<span>
<small class="a">1109kJ / 261kcal</small>
<small class="b">455kJ / 107kcal</small>
</span>
</li>
</ul>
Stack Overflow用户
发布于 2012-07-01 12:17:38
为什么会发生这种情况，因为第一种样式被应用到将其移向右侧的位置，无论标记中接下来出现的是哪种样式，都必须从右开始，这就是为什么您看到的是BA而不是AB
标记更改:将文本包含在span中并将float:left添加到其中
<ul class="list">
<li><span class="text">some text</span>
<small class="a">A</small>
<small class="b">B</small>
</li>
</ul>Css更改，从a和b中移除float:right并将float:left添加到文本中。
.text{float:left;}
.list small.a {
display:inline;
}
.list small.b {
display:inline;
}工作小提琴：http://jsfiddle.net/LKVdE/8/
Stack Overflow用户
发布于 2012-07-01 12:23:10
A和B应放在一个正确的浮动容器中：
.list small.a {
display:inline;
}
.list small.b {
display:inline;
}
.floatright {
float:right;
}和
<li>some text
<div class="floatright">
<small class="a">A</small>
<small class="b">B</small>
</div>
</li>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/11281772
复制相关文章
相似问题
腾讯云开发者
