Question

我正在尝试将两个元素放在右侧彼此旁边的li列表中以获得结果：
有些文字................. A ... B

不幸的是，这个订单让我发疯了。

这是html代码：

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

使用以下CSS代码，我能够将右侧的小元素彼此相邻，但结果是我在A旁边的右侧看到了B！

.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

查看此处的示例 - ＆gt; 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>

Answer 2

为什么会发生这种情况，因为第一种风格应用于将其移动到右侧，无论下一次出现在标记中，现在必须遵循右边的那种情况，这就是为什么你看到 BA 而不是的 AB

标记更改：将文字包含在范围内并向其添加float:left

<ul class="list"> <li>some text A B </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/

Answer 3

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>

浮动2个元素彼此相邻

3 个答案: