Disponi più checkbox come una griglia. Senza tavoli?

Question

Attualmente sto lavorando su un grande formulare con un sacco di checkbox. C'è un modo per visualizzarli come una griglia, ad es. 4 colonne?

So che puoi farlo con i tavoli ma non voglio usarli per lo stile se non è veramente necessario. Quindi c'è un modo con i CSS?

Esempio:
[] Testo [] Testo [] Testo [] text
[] Testo [] Testo [] Testo [] text
...

Answer 1

Ecco una soluzione, con completa markup casella di controllo e CSS, e un esempio funzionante.

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

Partenza l'esempio di lavoro qui: http://jsfiddle.net/FmV9k/

Answer 2

si può galleggiare le caselle di controllo e dare ciascuna una larghezza del 25% del contenitore genitore.

Answer 3

Prova 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

Si può certamente usare div e come farlo, non abbiate paura di tavoli però. Hanno applicazioni pertinenti e dovresti usarli se quello che stai cercando di fare lo usa.

Ecco una soluzione css basata div: 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

La proprietà colonne è una buona scelta per questo compito, perché si può renderlo reattivo molto facilmente.

http://jsfiddle.net/FmV9k/1/ (prefissi non incluse)

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

abbiamo specificato 4 colonne, ma devono essere un minimo di 8em larga. Se non c'è spazio sufficiente per tutte e 4 le colonne, rimuoverà le colonne se necessario per garantire che venga raggiunta la larghezza minima.

Answer 6

Prova con "float:left;display:table-cell" e la classe pseudo ":nth-child" e "float:none"

controllo questo fuori: http://jsfiddle.net/7gdgQ/1/ (è commentato)

E buona fortuna!