對齊後對齊

我正在嘗試使用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

回答

相關問題