Sắp xếp nhiều hộp kiểm như lưới. Không có bảng?

Question

Tôi hiện đang làm việc trên một công thức lớn với rất nhiều hộp kiểm. Có cách nào để hiển thị chúng như lưới không, ví dụ: 4 cột?

Tôi biết bạn có thể làm điều này với bảng nhưng tôi không thực sự muốn sử dụng chúng để tạo kiểu cho mọi thứ nếu nó không thực sự cần thiết. Vậy có cách nào với CSS?

Ví dụ:
[] text [] text [] text [] text
[] text [] text [] text [] text
...

Answer 1

Dưới đây là một giải pháp, với đánh dấu hộp kiểm đầy đủ và CSS, và một ví dụ làm việc.

HTML

<ul class="checkbox-grid"> 
    <li><input type="checkbox" name="text1" value="value1" /><label for="text1">Text 1</label></li> 
    <li><input type="checkbox" name="text2" value="value2" /><label for="text2">Text 2</label></li> 
    <li><input type="checkbox" name="text3" value="value3" /><label for="text3">Text 3</label></li> 
    <li><input type="checkbox" name="text4" value="value4" /><label for="text4">Text 4</label></li> 
    <li><input type="checkbox" name="text5" value="value5" /><label for="text5">Text 5</label></li> 
    <li><input type="checkbox" name="text6" value="value6" /><label for="text6">Text 6</label></li> 
    <li><input type="checkbox" name="text7" value="value7" /><label for="text7">Text 7</label></li> 
    <li><input type="checkbox" name="text8" value="value8" /><label for="text8">Text 8</label></li> 
</ul> 

CSS

.checkbox-grid li { 
    display: block; 
    float: left; 
    width: 25%; 
} 

Kiểm tra ví dụ làm việc ở đây: http://jsfiddle.net/FmV9k/

Answer 2

Bạn có thể nổi các hộp kiểm và đưa ra mỗi chiều rộng là 25% của vùng chứa chính.

Answer 3

Hãy thử ul li

<div> 
<ul class="chk"> 
<li>checkbox</li> 
<li>checkbox</li> 
<li>checkbox</li> 
<li>checkbox</li> 

<li>checkbox</li> 
<li>checkbox</li> 
<li>checkbox</li> 
<li>checkbox</li> 

</ul> 
</div> 


.chk 
{ 
    width:100%; 
} 
.chk li 
{ 
    display:inline-block; 
    width:25%; 
} 

Answer 4

Bạn chắc chắn có thể sử dụng của div và như vậy để làm như vậy, đừng sợ của bảng mặc dù. Họ có các ứng dụng thích hợp và bạn nên sử dụng chúng nếu những gì bạn đang cố gắng để làm bảo đảm bằng cách sử dụng chúng.

Đây là một div dựa trên giải pháp css: http://jsfiddle.net/XugFX/

HTML

<div class="row"> 
    <div class="col"><input type="checkbox" /><label>Box 1</label></div> 
    <div class="col"><input type="checkbox" /><label>Box 2</label></div> 
    <div class="col"><input type="checkbox" /><label>Box 3</label></div> 
    <div class="col"><input type="checkbox" /><label>Box 4</label></div> 
</div> 
<div class="row"> 
    <div class="col"><input type="checkbox" /><label>Box 5</label></div> 
    <div class="col"><input type="checkbox" /><label>Box 6</label></div> 
    <div class="col"><input type="checkbox" /><label>Box 7</label></div> 
    <div class="col"><input type="checkbox" /><label>Box 8</label></div> 
</div> 

CSS

.row { 
    border: 1px solid red; 
    overflow: hidden; 
    padding: 5px; 
} 

.col { 
    border: 1px solid blue; 
    float: left; 
    padding: 5px; 
    margin-right: 5px; 
} 

Answer 5

Thuộc tính cột là một sự lựa chọn tốt cho nhiệm vụ này, vì bạn có thể làm cho nó đáp ứng rất dễ dàng.

http://jsfiddle.net/FmV9k/1/ (tiền tố không bao gồm)

.checkboxes { 
    columns: 4 8em; 
} 


<ul class="checkboxes"> 
    <li><label><input type="checkbox" name="text1" value="value1" />Text 1</label></li> 
    <li><label><input type="checkbox" name="text2" value="value2" />Text 2</label></li> 
    <li><label><input type="checkbox" name="text3" value="value3" />Text 3</label></li> 
    <li><label><input type="checkbox" name="text4" value="value4" />Text 4</label></li> 
    <li><label><input type="checkbox" name="text5" value="value5" />Text 5</label></li> 
    <li><label><input type="checkbox" name="text6" value="value6" />Text 6</label></li> 
    <li><label><input type="checkbox" name="text7" value="value7" />Text 7</label></li> 
    <li><label><input type="checkbox" name="text8" value="value8" />Text 8</label></li> 
</ul> 

Chúng tôi đã chỉ định 4 cột, nhưng họ phải có tối thiểu là 8em rộng. Nếu không có đủ chỗ cho tất cả 4 cột, thì nó sẽ loại bỏ cột khi cần thiết để đảm bảo độ rộng tối thiểu được đáp ứng.

Answer 6

Hãy thử với "float:left;display:table-cell" và lớp giả ":nth-child" và "float:none"

việc kiểm tra này ra: http://jsfiddle.net/7gdgQ/1/ (là nhận xét)

Và chúc may mắn!