0

我试图在右侧的 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

请参阅此处的示例-> http://jsfiddle.net/LKVdE/



预先感谢任何提示！

4

3 回答 3

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>

​</p>

于 2012-07-01T12:06:57.870 回答
1

为什么会发生这种情况，因为第一个样式应用于将其移动到右侧的 a ，标记中接下来出现的任何内容现在必须从右侧跟随 a 这就是为什么您看到BA而不是AB

标记更改：在跨度内包含文本并添加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 更改，float:right从 a 和 b 中删除并添加float:left到文本

    .text{float:left;}
    .list small.a {
        display:inline;
     }  
     .list small.b {
        display:inline;
     }

工作小提琴：http: //jsfiddle.net/LKVdE/8/

于 2012-07-01T12:17:38.187 回答
1

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>
于 2012-07-01T12:23:10.960 回答