2012-05-03 61 views
12

Tôi nên căn chỉnh danh sách ở bên phải như thế nào? Văn bản căn chỉnh hoàn hảo, tuy nhiên dấu đầu dòng không. Có một cách đơn giản và dễ dàng để làm như vậy với CSS?Danh sách liên kết phải CSS

Code:

<ul style="text-align: right"> 
<li>Item 1</li> 
<li>Item 2</li> 
<li>Item 3</li> 
</ul> 

Thậm chí nếu tôi đặt các quy tắc cho các yếu tố LI trực tiếp để được sắp xếp ngay rigth, nó không hoạt động.

EDIT Tôi có kèm theo một hình ảnh cho thấy những gì tôi muốn đạt được: On the right is what I want. On the left is what I have

SOLUTION FOUND Nhờ Adriano

"text-align: right;" kết hợp với "danh sách kiểu-vị trí: bên trong;" thực hiện những gì tôi muốn. Cảm ơn tất cả!

+0

Không chắc chắn những gì bạn đang cố gắng đạt được. Là [this] (http://jsfiddle.net/a2Jup/) nó (xem với FF)? – Jon

+0

@Jon, không, hãy nhìn vào hình ảnh tôi đã đính kèm –

+0

tương tự như: http://stackoverflow.com/questions/4977807/ul-li-bullets-as-image-an-right-side-next-to- văn bản – swati

Trả lời

22

Nếu bạn cần phải sắp xếp các viên đạn với văn bản mà bạn có thể sử dụng thuộc tính list-style-position, như sau:

.theList 
{ 
    text-align: right; 
    list-style-position: inside; 
}​ 
+1

Tác phẩm này. Tôi chưa từng nghe về vị trí kiểu danh sách! Cảm ơn! –

+0

Tôi cũng vậy. +1. –

+2

.theList ở đâu lớp này, với ul hoặc li –

15

Sử dụng hướng:

direction: rtl; 

Nó thường được sử dụng cho đúng ngôn ngữ trái.

chỉnh sửa:

Float từng bên phải và xóa cả hai.

float: right; 
clear: both; 
+0

Cảm ơn bạn đã trả lời nhưng nó đảo ngược dấu đầu dòng bằng văn bản - đây không phải là những gì tôi cần. –

+0

Xin vui lòng diễn đạt lại câu hỏi của bạn và thêm hình ảnh đầu ra mong muốn. Bởi vì tôi hiểu lầm rõ ràng. –

+0

Tôi đã cập nhật câu hỏi của mình –

-4
<ul style="float:right; text-align:left; list-style:none;"> 

việc kiểm tra này .....

nếu bạn muốn dấu đầu dòng sau đó xóa list-style:none;

1

Nếu tôi hiểu yêu cầu của bạn một cách chính xác, thì hãy chọn t right-floating các phần tử li phải đủ: http://jsfiddle.net/Jxzs4/1/

Các vấn đề liên quan