Các mục danh sách song song làm biểu tượng trong một div (css)

Question

Tôi đang tìm cách tạo một <ul> các mục mà tôi có thể đặt trong một <div> và để chúng hiển thị cạnh nhau và bao bọc dòng tiếp theo khi cửa sổ trình duyệt được thay đổi kích thước. Ví dụ: nếu chúng tôi có 10 mục trong danh sách hiện đang hiển thị 5 mục trên hàng đầu tiên và 5 mục trên hàng thứ hai, khi người dùng làm cửa sổ trình duyệt rộng hơn, nó biến thành 6 mục trên hàng đầu tiên và 4 mục trên hàng thứ hai, v.v.

Tôi đang tìm chức năng tương tự như những gì Windows Explorer thực hiện khi xem trong chế độ xem gạch/biểu tượng/hình thu nhỏ. Tôi có thể tạo ra <li> 's tôi muốn như xa như kích thước, màu sắc, nội dung, vv Tôi chỉ gặp rắc rối với gói/thanh toán bù trừ/etc. phần.

Answer 1

cung cấp cho các phao LI: trái (hoặc phải)

Tất cả đều sẽ được trong cùng một dòng cho đến khi có sẽ không còn chỗ trong container (trường hợp của bạn, một ul). (quên): Nếu bạn có một phần tử khối sau các phần tử nổi, anh ta cũng sẽ dính vào chúng, trừ khi bạn cho anh ta rõ ràng: cả hai, HOẶC đặt một div trống trước nó với rõ ràng: cả hai

Answer 2

Đây là một tốt tài nguyên để gói danh sách cột. http://www.communitymx.com/content/article.cfm?cid=27f87

Answer 3

Đây có thể là giải pháp CSS tinh khiết. Đưa ra:

<ul class="tileMe"> 
    <li>item 1<li> 
    <li>item 2<li> 
    <li>item 3<li> 
</ul> 

CSS sẽ là:

.tileMe li { 
    display: inline; 
    float: left; 
} 

Bây giờ, kể từ khi bạn đã thay đổi chế độ hiển thị từ 'khối' (ngụ ý) để 'inline', bất kỳ đệm, lề, chiều rộng, hoặc các kiểu chiều cao bạn đã áp dụng cho các phần tử li sẽ không hoạt động. Bạn cần phải tổ một yếu tố khối cấp bên trong li:

<li><a class="tile" href="home">item 1</a></li> 

và thêm CSS sau đây:

.tile a { 
    display: block; 
    padding: 10px; 
    border: 1px solid red; 
    margin-right: 5px; 
} 

Các khái niệm then chốt đằng sau giải pháp này là bạn đang thay đổi phong cách hiển thị của li để 'nội tuyến' và lồng phần tử cấp khối bên trong để đạt được hiệu ứng ốp lát nhất quán.

Answer 4

Sử dụng mã sau để làm nổi bật các mục và đảm bảo chúng được hiển thị nội tuyến.

ul.myclass li {float: left; display: inline}

Cũng đảm bảo rằng các thùng chứa bạn đặt chúng trong được lưu hành với chiều rộng 100% hoặc một số kỹ thuật khác để đảm bảo các mục nổi được chứa bên trong nó và các mục sau bên dưới.

Answer 5

Tôi khuyên bạn nên sử dụng display: inline;. float bị tắt trong IE.Dưới đây là một ví dụ về cách tôi sẽ tiếp cận nó:

<ul class="side-by-side"> 
    <li>item 1<li> 
    <li>item 2<li> 
    <li>item 3<li> 
</ul> 

và đây là css:

.side-by-side { 
    width: 100%; 
    border: 1px solid black; 

} 
.side-by-side li { 
    display: inline; 
} 

Ngoài ra, nếu bạn sử dụng nổi các ul sẽ không quấn quanh li 's và thay vào đó sẽ có một cao 0 trong ví dụ này:

.side-by-side li { 
    float: left; 
} 

Answer 6

Tôi đã sử dụng kết hợp các yếu tố trên để đạt được kết quả làm việc; Thay đổi phao để trái và hiển thị Block the li thân HTML:

<ol class="foo"> 
    <li>bar1</li> 
    <li>bar2</li> 
</ol> 

CSS:

.foo li { 
    display: block; 
    float: left; 
    width: 100px; 
    height: 100px; 
    border: 1px solid black; 
    margin: 2px; 
} 

Answer 7

thêm dòng này trong file css của bạn:

.classname ul li { 
    float: left; 
}