右对齐后伪

Question

我正在尝试使用CSS3伪：在li元素之后。问题是：以下内容紧跟在li内容之后 - 好像：之后使用text-align：left;但是因为我的li元素使用display：block;不应该使用text-align：right;上：移动后：内容一路向右走？它无论如何都没有。

.container ul li    {
    display: block;
    border-bottom: 1px solid rgb(60,60,60);
    border-top: 1px solid rgb(255,255,255);
    padding: 5px 5px 5px 30px;
    font-size: 12px;
}

.container ul li:after {
    content: ">";
    text-align: right;
}

这是问题的屏幕截图：

我想要＆gt;在右边一直都是这样，而且由于li的内容发生了变化，我无法在内容之后设置宽度。

我如何得到：在内容与右边对齐之后，如果没有与text-align对齐？

Answer 1

尝试float：

.container ul li:after {
    content: ">";
    text-align: right;
    float:right;
}

演示http://jsfiddle.net/surN2/

Answer 2

嘿，现在您可以使用position属性，如下所示：

.container ul li    {
    display: block;
    border-bottom: 1px solid rgb(60,60,60);
    border-top: 1px solid rgb(255,255,255);
    padding: 5px 5px 5px 30px;
    font-size: 12px;
    position:relative;
}

.container ul li:after {
    content: ">";
    position:absolute;
    left:20px;
    top:5px;
}

并根据您的设计更改为css属性。

现场演示：http://tinkerbin.com/yXzOyDNg

如果您想要对齐而不是将left更改为right

.container ul li    {
    display: block;
    border-bottom: 1px solid rgb(60,60,60);
    border-top: 1px solid rgb(255,255,255);
    padding: 5px 5px 5px 30px;
    font-size: 12px;
}

 .container ul li:after {
    content: ">";
    position:absolute;
    right:20px;
    top:5px;
}

现场演示：http://tinkerbin.com/rSWKxLwX

Answer 3

使用float:right和特殊line-height进行垂直对齐。

.container ul li    {
    display: block;
    border-bottom: 1px solid rgb(60,60,60);
    border-top: 1px solid rgb(255,255,255);
    padding: 5px 5px 5px 30px;
    font-size: 12px;
    width: 100%;
}

.container ul li:after {
    content: ">";
    float: right;
    line-height: 12px;
}