文字仅与UL LI中的CSS对齐

Question

我有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中所有第二个跨度的文本都向右对齐，但是我无法修改html结构。 我只能添加类或ID。 可以仅使用CSS制作吗？

jsfiddle

Answer 1

您可以改为浮动它们：

ul li span+span {
    float: right;
} 

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

Answer 2

您可以尝试使用：nth-​​child伪选择器来选择第二个孩子，即span并可以放置您的CSS。

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

Js小提琴演示

Answer 3

您可以在第二个跨度中添加一个类，并在该类中添加float：right 。

Answer 4

您可以添加一个类来跨越例如

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

并定义right类为

.right{
    float:right;
}

实际操作中请参见jsFiddle