对齐后对齐

我正在尝试使用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; 
}

这是问题的一个屏幕截图：

:after not doing what I want

我想>要在正确的一路，由于涉及的Li的内容改变，我可以” t在内容后面设置宽度。

我该如何得到：内容对齐后，如果没有文本对齐？

来源

2012-07-04 Charles John Thompson III

尝试浮动

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

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

来源

2012-07-04 11:25:21 Sowmya

太棒了！现在，我只需要找到一个很薄的unicode右单人字形......正常的>就是为了我的口味而宽广。 –

您可以使用CSS中的图像作为背景图像。 – Sowmya

我正在计划在此项目中使用ZERO背景图像......您在图像中看到的所有内容都是纯CSS。 –

嘿，现在你可以使用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

来源

2012-07-04 11:25:58

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

来源

2016-02-15 16:11:20

回答

相关问题