0

私はhtmlを持っています:

<ul>
    <li><span>text</span><span>to right</span></li>
        <li><span>text2 text2 text2 </span><span>to right</span></li>
        <li><span>text3</span><span>to right</span></li>
        <li><span>text4</span><span>to right</span></li>
        <li><span>text5text5text5</span><span>to right</span></li>
</ul>

そしてCSS：

ul li {
    width: 300px;
    background-color: #ff9999;
}

li のすべての 2 番目のスパンでテキストを右揃えにしたいのですが、html 構造を変更できません。クラスまたはIDのみを追加できます。CSSだけで作れますか？

jsfiddle

4

4 に答える 4

2

代わりにそれらをフロートすることができます:

ul li span+span {
    float: right;
}

http://jsfiddle.net/ePcDq/1/

于 2013-09-27T19:50:11.967 に答える
1

:nth-child疑似セレクターを使用して、2 番目の子、つまりスパンを選択し、CSS を配置することができます。

ul li span:nth-child(2)
{
    float:right;
}

JS フィドルのデモ

于 2013-09-27T19:51:04.240 に答える
0

クラスを毎秒スパンに追加し、このクラスに float: rightを追加できます。

于 2013-09-27T19:53:16.273 に答える
0

たとえば、スパンするクラスを追加できます

<span class='right'>to right</span

rightクラスを次のように定義します

.right{
    float:right;
}

実際の jsFiddle を見る

于 2013-09-27T19:54:30.097 に答える