Organiser plusieurs cases à cocher comme une grille. Sans tables?

Question

Je travaille actuellement sur un grand formulaire avec beaucoup de cases à cocher. Existe-t-il un moyen de les afficher comme une grille, par ex. 4 colonnes?

Je sais que vous pouvez le faire avec des tables mais je ne veux pas vraiment les utiliser pour styliser les choses si ce n'est pas vraiment nécessaire. Y a-t-il un moyen avec CSS?

Exemple:
[] texte [] texte [] texte [] texte
[] texte [] texte [] texte [] texte
...

Answer 1

Voici une solution, avec un balisage de case à cocher complète et CSS, et un exemple de travail.

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

Découvrez l'exemple de réalisation ici: http://jsfiddle.net/FmV9k/

Answer 2

Vous pouvez faire flotter les cases à cocher et donner chacun une largeur de 25% du conteneur parent.

Answer 3

Essayez 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

Vous pouvez certainement utiliser div et de ce faire, ne pas avoir peur des tables bien. Ils ont des applications pertinentes et vous devriez les utiliser si ce que vous essayez de faire les utilise.

Voici une solution css basée 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 propriété columns est un excellent choix pour cette tâche, puisque vous pouvez le rendre très réactif.

http://jsfiddle.net/FmV9k/1/ (préfixes non inclus)

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

Nous avons spécifié 4 colonnes, mais ils doivent être un minimum de 8em large. S'il n'y a pas assez de place pour les 4 colonnes, alors il enlèvera les colonnes si nécessaire pour s'assurer que la largeur minimum est atteinte.

Answer 6

Essayez avec "float:left;display:table-cell" et la pseudo-classe ":nth-child" et "float:none"

Check this out: http://jsfiddle.net/7gdgQ/1/ (est commenté)

Et bonne chance!