Danh sách nằm ngang trong CSS

Question

Thực tiễn tốt nhất để thực hiện danh sách ngang trong css là gì? Bây giờ tôi biết đây là một câu hỏi rất cơ bản nhưng hiệu quả tôi đang tìm kiếm là trong một trang web như thế này: http://www.frontend2011.com/.

Nếu bạn cuộn xuống phần video với 4 danh sách cột, bạn sẽ thấy sử dụng tốt nó. Nhưng nếu tôi đưa ra thứ gì đó như float: left và margin-left: #px; trong CSS, mục danh sách cuối cùng của tôi luôn rơi xuống hàng tiếp theo trước khi thậm chí không đến gần mép của mô hình hộp div.

Tôi nghe nói đó là do mô hình hộp và ranh giới/padding/lề nhưng cách tốt nhất để vượt qua điều này là gì? Tôi muốn các danh sách chạm vào bên phải và bên trái của div nhưng điều này dường như không thể đối với tôi.

Answer 1

này có thể là một dụng tốt box-sizing tài sản (được hỗ trợ bởi tất cả các trình duyệt, IE8 bao gồm): đưa ra một danh sách có thứ tự (và giả danh-mục tất cả với cùng một chiều cao), bạn có thể gán kiểu này để mỗi <li>:

li { 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 

    float : left; 
    width : 25%; 
    padding : 15px; /* this will be applied internally, due to 
         box-sizing property */ 

} 

sau đó nếu bạn muốn buộc một thanh toán bù trừ sau mỗi 4 ^thứli, chỉ cần thêm

li:nth-child(4n) { 
    clear : left; 
} 

cách khác, nếu bạn không thể chắc chắn rằng tất cả các <li> có luôn cùng một chiều cao sau đó sử dụng inline-block vị trí thay vì float.

Answer 2

Bạn muốn trước hết là số margin và padding, vì vậy bạn không còn có sự nắm giữ vốn có trong danh sách. (Lưu ý, bạn có lẽ nên làm điều này cụ thể thông qua một lớp học, tức là, ul class="horizontal").

Sau đó, hãy thả nổi li và đặt chiều rộng tương đối (theo pixel hoặc phần trăm) với chiều rộng ul. Tuy nhiên, việc tính toán margin giữa các li s có thể khó khăn hơn đối với độ rộng phần trăm, nếu bạn muốn tách biệt tuyệt đối (ví dụ: 1px).

EDIT - Tôi quên thêm phút cuối cùng của lớp học .horizontal vào tất cả các bộ chọn.

Và với hiệu ứng full box: http://jsfiddle.net/MYLGv/9/

<ul class="horizontal"> 
    <li>List Item</li> 
    <li>List Item</li> 
    <li>List Item</li> 
    <li>List Item</li> 
    <li>List Item</li> 
    <li>List Item</li> 
    <li>List Item</li> 
    <li>List Item</li> 
    <li>List Item</li> 
</ul> 

ul.horizontal, 
ul.horizontal li { 
    margin: 0; 
    padding: 0; 
} 
ul.horizontal { 
    list-style-type: none; 
    width: 400px; 
    background: whiteSmoke; 
    overflow: auto; 
    margin: 0 auto; 
} 
ul.horizontal li { 
    float: left; 
    width: 99px; 
    height: 99px; 
    margin: 0 1px 1px 0; 
    text-align: center; 
    background: url(http://www.gravatar.com/avatar/e1122386990776c6c39a08e9f5fe5648?s=64&d=identicon&r=PG) center center no-repeat; 
    background-color: gray; 
    color: white; 
} 

http://jsfiddle.net/MYLGv/8/

Answer 3

Đó vị trí đặc biệt trong trang bạn liên quan đến sử dụng CSS sau đây để làm cho những danh sách ngang.

.col{ 
    width: 24%; 
    margin: 0 0 2% 1%; 
    float: left; 
} 

Answer 4

Có một số cách để hiển thị danh sách theo chiều ngang.

1) Bạn có thể đặt li: s để display: inline, các yếu tố inline chiều rộng, chiều cao và đệm không thể theo kiểu các yếu tố cùng một khối cách có thể vì thế nếu bạn muốn hình nền hoặc biên giới bạn nên sử dụng:

2) display: inline-block hiển thị li: s trên một dòng trong khi vẫn giữ các tính năng của phần tử khối, inline-block hoạt động trong hầu hết các trình duyệt nhưng bạn có thể cần sử dụng *display: inline cho IE7 trở xuống. Các yếu tố inline và inline-block bị ảnh hưởng bởi chiều cao dòng và kích thước phông chữ và bạn có thể nhận được khoảng trống không mong muốn giữa các mục menu của mình, bạn có thể dễ dàng giải quyết điều này bằng cách đặt font-size thành 0 trên ul và đặt trở lại bình thường trong li: s .

3) Thứ ba, bạn có thể sử dụng cùng với display: blockfloat: left, vấn đề với float là nó không thể làm trung tâm như display: inline-block có thể dễ dàng với text-align: centervà bạn phải nhớ để xóa các yếu tố phụ huynh (overflow: hidden trên ul là đủ)

4) Nếu bạn cần danh sách của bạn để span toàn bộ chiều rộng của công ty mẹ của nó, điều đơn giản nhất bạn có thể làm là sử dụng display: table; width: 100% trên ul và display: table-cell trên li: s, làm cho ul cư xử giống như một table

Answer 5

Đó là cơ bản không thể có được quyền này với CSS tinh khiết và không sử dụng một bảng cấu trúc/javascript, cũng thấy here.

tôi đã sử dụng giải pháp jQuery cũng được đề nghị đó và nó hoạt động hoàn hảo. Tìm liên kết here.

Và đây là đoạn code:

var currentTallest = 0, 
    currentRowStart = 0, 
    rowDivs = new Array(), 
    $el, 
    topPosition = 0; 

$('.blocks').each(function() { 

    $el = $(this); 
    topPosition = $el.position().top; 

    if (currentRowStart != topPosition) { 

    // we just came to a new row. Set all the heights on the completed row 
    for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) { 
     rowDivs[currentDiv].height(currentTallest); 
    } 

    // set the variables for the new row 
    rowDivs.length = 0; // empty the array 
    currentRowStart = topPosition; 
    currentTallest = $el.height(); 
    rowDivs.push($el); 

    } else { 

    // another div on the current row. Add it to the list and check if it's taller 
    rowDivs.push($el); 
    currentTallest = (currentTallest < $el.height()) ? ($el.height()) : (currentTallest); 

    } 

    // do the last row 
    for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) { 
    rowDivs[currentDiv].height(currentTallest); 
    } 

});​