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 中的所有第二个跨度的文本右对齐，但我无法修改 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伪选择器来选择第二个孩子，即跨度并可以放置您的 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 回答