mục danh sách đều nhau

Question

Tôi đã được giao nhiệm vụ tạo ra một danh sách nav ngang trông như thế này:

điểm là rằng các mục cần phải được đặt cách nhau từng từ tuyệt đối trái sang phải.

Đặt chiều rộng là một nỗi đau vì các trình duyệt khác nhau xuất hiện để diễn giải chúng khác nhau. Ngoài ra, số lượng mục trong danh sách này sẽ thay đổi tùy thuộc vào người dùng.

Mọi lời khuyên sẽ được đánh giá cao!

---

Làm theo @Dean lời khuyên, tôi đã tìm thấy chính mình bên dưới - điều này khá chính xác. Điều duy nhất tôi nghĩ là hai yếu tố bên trái là không may ngắn, do đó khoảng cách lớn. Tôi hy vọng khách hàng sẽ hài lòng với text-align; trung tâm trên tất cả các yếu tố với một liên lạc của padding ở bên cạnh!

Answer 1

Tôi đã thực hiện một trình đơn của bạn ... mọi thứ đều cách nhau một cách hoàn hảo, năng động và tất cả đều hướng về phía bên trái/bên phải mà không có các vấn đề ngữ nghĩa HTML lạ hoặc khó hiểu. (Và nó cũng làm việc trong IE 6, nếu vấn đề.)

http://jsfiddle.net/bXKFA/2/

HTML:

<div id="menuwrapper"> 
    <div class="menuitem">CAREERS</div> 
    <div class="menuitem">TRADE</div> 
    <div class="menuitem">CONTACT US</div> 
    <div class="menuitem">PRIVACY POLICY</div> 
    <div class="menuitem">T&amp;CS</div> 
    <div class="menuitem">SITEMAP</div> 
    <div class="menuitem">CORPORATE</div> 
    <div class="menuitem">ACCESSIBILITY</div> 
    <span class="stretcher"></span> 
</div> 

CSS:

#menuwrapper { 
    height: auto; 
    background: #000; 
    text-align: justify; 
    -ms-text-justify: distribute-all-lines; 
    text-justify: distribute-all-lines; 
} 

.menuitem { 
    width: auto; 
    height: 40px; 
    vertical-align: top; 
    display: inline-block; 
    *display: inline; 
    zoom: 1 
    background: #000; 
    color: yellow; 
} 

.stretcher { 
    width: 100%; 
    display: inline-block; 
    font-size: 0; 
    line-height: 0; 
} 

tôi dựa trên câu trả lời của thirtydot trong chủ đề này ...

Fluid width with equally spaced DIVs

Answer 2

Tôi không nghĩ điều này cần danh sách. Bạn có thể tạo một chuỗi từ trong div bằng text-align: justify không?

Answer 3

Bạn sẽ không thể có được điều này làm việc tốt trong IE6, nhưng bạn có thể sử dụng cho tất cả các trình duyệt chính:

ul { 
display: table; 
table-layout: fixed; /* the magic dust that ensure equal width */ 
} 
li { display: table-cell; text-align: center; } 

Đối với IE6 (có thể là 7), bạn sẽ cần phải sử dụng Javascript để tính toán chiều rộng động.

Cũng đừng quên căn chỉnh văn bản: để lại mục danh sách đầu tiên của bạn và căn chỉnh văn bản: phải là cuối cùng.