li phao vs hiển thị: nội tuyến

Question

Có sự lựa chọn tốt nhất trong số float: left hoặc display: inline để căn chỉnh các mục danh sách theo chiều ngang?

ví dụ: http://www.vanseodesign.com/css/simple-navigation-bar-with-css-and-xhtml/

Cá nhân tôi không thích float, nhưng điều đó có lẽ nhiều hơn một điều xúc động hơn là logic.

Answer 1

ul { list-style-type: none; overflow: hidden; width:200px; } 
ul li { float:left; width: 100px; } 
ul li a { display: block; padding: 10px; width:80px; } 
ul li a:hover { background: black; } 


<ul> 
    <li><a href="http://www.facebook.com">Facebook</a></li> 
    <li><a href="httpt://www.google.com">Google</a></li> 
</ul> 

Đây là những gì tôi thích chủ yếu là bởi vì khi bạn sử dụng display:inline bạn không thể thiết lập các thuộc như chiều rộng, đệm (trên và dưới), lề vv ... mà là một khuyết tật cho các mục đích bố trí.

EDIT 2014

Nó cũng là một lựa chọn để sử dụng display: inline-block tài sản. Một lưu ý cần lưu ý là khi bạn tạo các phần tử danh sách nội tuyến hoặc khối nội tuyến, các khoảng trắng sẽ được xem xét. Do đó, sẽ có không gian không mong muốn giữa các phần tử.

ul { list-style-type: none; width: 300px; font-size: 0; } 
ul li { display: inline-block; *display: inline; zoom: 1; margin-right: 10px; } 
/* The *display and zoom is a IE hack, though can't remember 
    now which one (guess it is IE7) */ 
ul li a { display: inline-block; padding: 10px; font-size: 13px; } 

Kiểm tra fiddle tại đây.

Nếu bạn không muốn sử dụng thuộc tính font-size (đối với các sự cố tương thích với trình duyệt), bạn cũng có thể sử dụng nhận xét html để loại bỏ khoảng trắng! Mặc dù tôi thích phương pháp trên.

<ul><!-- 
    --><li><a href="http://www.facebook.com">Facebook</a></li><!-- 
    --><li><a href="httpt://www.google.com">Google</a></li><!-- 
--></ul> 

Answer 2

Tôi đã nhận thấy một số lỗi hiển thị khi hiển thị nội tuyến của LI trong chrome. Biên giới LI của tôi đôi khi không hiển thị với phần đệm ngang thích hợp.

Nói chung, tôi thích Inline, nó vẫn cung cấp cho bạn lề và lề ngang và bạn có thể thực hiện văn bản căn chỉnh đẹp: trung tâm; trên UL và sử dụng UL cho khoảng cách dọc.

Tôi có xu hướng sử dụng phao hoàn toàn bởi vì LI là một phần tử khối theo mặc định và phải được xử lý theo cách đó theo ý kiến ​​của tôi nhưng có trường hợp sử dụng rõ ràng cho cả hai.

Answer 3

gì về

li { 
     display:inline-block 
}; 

Sau đó, bạn có thể thiết lập các thuộc tính như chiều rộng, heigth, đệm, lề, vv ..

Answer 4

Đó là sở thích cá nhân.

Từ điểm CSS, Display:Inline = Float:Left(Right).
Khi nói đến việc tạo thành các phần tử ngang, như <li>.

Quy tắc css Float mới hơn Hiển thị.