Căn chỉnh một số văn bản trong một mục danh sách

Question

Tôi có một danh sách lồng nhau không có thứ tự có nội dung chính ở bên trái và tôi muốn thêm các tùy chọn được thả nổi bên phải, sao cho chúng được căn chỉnh ở bên phải bất kể mức thụt đầu dòng.

<ul> 
<li> Item 1 <span class='options'> link </span> </li> 
<li> Item 2 <span class='options'> link </span> 
    <ul> 
    <li>Item 3 <span class='options'> link </span> </li> 
    </ul> 
</li> 
</ul> 

Tôi có css sau:

ul { 
    list-style: none; 
    padding: 0; 
    margin: 0; 
} 

li { 
    padding-left: 15px; 
    width: 400px; 
} 

.options { 
    float: right; 
    width: 50px; 
} 

Khi điều này được sử dụng tuy nhiên khoảng tùy chọn được sắp về bên, nhưng 1 dòng dưới dòng mong đợi.

Làm cách nào tôi có thể nhận được khoảng tùy chọn để xếp hàng với mục danh sách?

TIA, Adam

Answer 1

Thay vì thả nổi, bạn có thể muốn thử định vị tuyệt đối.

ul { 
    list-style: none; 
    padding: 0; 
    margin: 0; 
} 

li { 
    padding-left: 15px; 
    width: 400px; 
    position: relative; 
} 

.options { 
    width: 50px; 
    position: absolute; 
    right: 0px; 
} 

Answer 2

Sử dụng CSS này:

ul { 
    list-style: none; 
    padding: 0; 
    margin: 0; 
} 

li { 
    padding-left: 15px; 
    width:400px; 
} 
.options { 
    float: right; 
    width: 50px; 
} 
li li { width:385px} 

này không may đòi hỏi của bạn để xác định chiều rộng trừ đệm. tùy thuộc vào tính linh hoạt của bạn, điều này sẽ hoạt động. Đã thử nghiệm trong Chrome 3.0.

Answer 3

Nếu sửa đổi mã HTML là OK, bạn có thể gửi kèm theo "Item 1" trong một khoảng thời đầu tiên và:

• phao nó sang trái (vẫn nổi .options bên phải)
• sử dụng display: inline-block trên cả hai span và text-align: right trên .options, thay vì phao (không tương thích với Fx2 mặc dù, và chỉ làm việc trong IE6/7 vì span là một yếu tố nội tuyến theo mặc định. Sẽ không hoạt động với div)