Giả sau khi căn phải

Question

Tôi đang cố gắng sử dụng CSS3 giả: sau trên các phần tử li. Vấn đề là nội dung của: sau ngay lập tức theo nội dung li - như sau: sau khi sử dụng căn chỉnh văn bản: trái; Nhưng vì các phần tử li của tôi sử dụng display: block; không nên sử dụng căn chỉnh văn bản: đúng; trên: sau khi di chuyển: sau khi nội dung tất cả các cách bên phải? Nó không sao.

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

Đây là một ảnh chụp màn hình về vấn đề này:

Tôi muốn> để được tất cả các con đường ở bên phải, và vì nội dung của những thay đổi li, tôi có thể' t đặt chiều rộng trên: sau nội dung.

Làm cách nào để nhận được: sau khi nội dung được căn chỉnh ở bên phải, nếu không có căn chỉnh văn bản?

Answer 1

Hãy thử phao

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

Demo http://jsfiddle.net/surN2/

Answer 2

Hey, bây giờ bạn có thể sử dụng position tính như như thế này:

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

và thay đổi các thuộc tính css theo thiết kế của bạn.

Live Demo: http://tinkerbin.com/yXzOyDNg

Nếu bạn muốn sang phải sắp xếp hơn thay đổi left vào 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; 
} 

Live Demo: http://tinkerbin.com/rSWKxLwX

Answer 3

Sử dụng float:right và đặc biệt line-height cho sự liên kết dọc.

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