Sola hizalandıktan sonra sözdizimi

Question

CSS3 sözdizimini kullanmaya çalışıyorum: li öğelerinden sonra. Sorun şu içeriğin içeriğidir: sonra içerik hemen takip ediliyor - sanki: metin-align'i kullandıktan sonra: left; Fakat li öğelerim kullandığından beri: block; metin hizalaması kullanmamalı: sağ; on: hareket ettikten sonra: içeriğin tamamından sonra sağa doğru? Bu zaten değil. '

Ben> Sağdaki tüm yol olmak istiyorum, ve li içeriği değiştikçe beri elimden:

.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; 
} 

Bu

konunun bir ekran görüntüsü t içeriği üzerinde bir genişlik ayarlayın.

Nasıl elde edebilirim: içerik hizalandıktan sonra, sağa hizalanacak içerikten sonra?

Answer 1

deneyin şamandıra

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

Demo http://jsfiddle.net/surN2/

Answer 2

Hey şimdi bu gibi position özelliklerini kullanılabilir yapabilirsiniz:

.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; 
} 

ve tasarımınızı göre css özelliklerine değiştirin.

Canlı tanıtım: http://tinkerbin.com/yXzOyDNg doğru değişim left daha hizalamak istiyorsanız

Canlı demo

.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; 
} 

right içine: http://tinkerbin.com/rSWKxLwX

Answer 3

Kullanım float:right ve dikey hizalama için line-height özel.

.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; 
}