0

結果を得るために、li リスト内の 2 つの要素を右側に並べて配置しようとしてい
ます

。注文は私を夢中にさせます。

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;
 }


だから、私は持っていることを目指しています:

しかし、例えば次のようになります
:

ここの例を参照してください--> http://jsfiddle.net/LKVdE/



ヒントをお寄せいただきありがとうございます。

4

3 に答える 3

1

最初のスタイルが a に適用されて右に移動するため、マークアップに次に表示されるものはすべて右から a に従う必要があるため、 ABではなくBAが表示されるのはなぜですか。

マークアップの変更: テキストをスパン内に含めて追加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/

于 2012-07-01T12:17:38.187 に答える
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 と 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 に答える