Rozmieść wiele pól wyboru, takich jak siatka. Bez tabel?

Question

Obecnie pracuję nad dużą formularną z wieloma polami wyboru. Czy istnieje sposób wyświetlenia ich jako siatki, np. 4 kolumny?

Wiem, że można to zrobić za pomocą tabel, ale nie chcę ich używać do stylu, jeśli nie jest to konieczne. Czy jest jakiś sposób na CSS?

Przykład:
[] tekst [] tekst [] tekst [] tekst
[] tekst [] tekst [] tekst [] tekst
...

Answer 1

Oto rozwiązanie, z pełną znaczników wyboru i CSS, a przykład pracy.

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%; 
} 

Zapoznaj się z przykładem pracuje tutaj: http://jsfiddle.net/FmV9k/

Answer 2

Można pływać pola wyboru i dać każdy o szerokości 25% kontenera nadrzędnego.

Answer 3

Spróbuj 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

Można oczywiście użyć div i takie, aby to zrobić, nie bój stołów chociaż. Mają stosowne aplikacje i powinieneś ich używać, jeśli to, co próbujesz zrobić, gwarantuje ich używanie.

Oto div rozwiązanie oparte na 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

Właściwość kolumny jest dobrym wyborem dla tego zadania, ponieważ można sprawiają, że reaguje bardzo łatwo.

http://jsfiddle.net/FmV9k/1/ prefiksy (brak w zestawie)

.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> 

Mamy określone 4 kolumny, ale muszą być minimum 8em szerokości. Jeśli nie ma wystarczająco dużo miejsca dla wszystkich 4 kolumn, to usunie kolumny, jeśli to konieczne, aby zapewnić minimalną szerokość.

Answer 6

spróbuj "float:left;display:table-cell" i klasy pseudo ":nth-child" i "float:none"

to sprawdzić: http://jsfiddle.net/7gdgQ/1/ (jest skomentował)

i powodzenia!