web-dev-qa-db-fra.com

Regroupement des cases à cocher CSS dans une disposition à plusieurs colonnes

J'ai le html suivant

<fieldset class="group"> 
<legend>Select standard pizza toppings</legend> 
<ul class="checkbox"> 
  <li><input type="checkbox" id="cb1" value="pepperoni" /><label for="cb1">Pepperoni</label></li> 
  <li><input type="checkbox" id="cb2" value="sausage" /><label for="cb2">Sausage</label></li> 
  <li><input type="checkbox" id="cb3" value="mushrooms" /><label for="cb3">Mushrooms</label></li> 
  <li><input type="checkbox" id="cb4" value="onions" /><label for="cb4">Onions</label></li> 
  <li><input type="checkbox" id="cb5" value="gpeppers" /><label for="cb5">Green Peppers</label></li> 
  <li><input type="checkbox" id="cb6" value="xcheese" /><label for="cb6>">Extra Cheese</label></li> 
</ul> 
</fieldset>

et css:

fieldset.group  { 
  margin: 0; 
  padding: 0; 
  margin-bottom: 1.25em; 
  padding: .125em; 
} 

fieldset.group legend { 
  margin: 0; 
  padding: 0; 
  font-weight: bold; 
  margin-left: 20px; 
  font-size: 100%; 
  color: black; 
} 


ul.checkbox  { 
  margin: 0; 
  padding: 0; 
  margin-left: 20px; 
  list-style: none; 
} 

ul.checkbox li input { 
  margin-right: .25em; 
} 

ul.checkbox li { 
  border: 1px transparent solid; 
} 

ul.checkbox li label { 
  margin-left: ; 
} 
ul.checkbox li:hover, 
ul.checkbox li.focus  { 
  background-color: lightyellow; 
  border: 1px gray solid; 
  width: 12em; 
}

Jusqu'ici, il semble que ceci . Je voulais qu'il n'y ait que 3 lignes dans le groupe. Donc, peperoni, sausage, mushrooms appartient à la première colonne, puis la colonne suivante est gpeppes, xcheese, etc, etc. Que dois-je modifier dans mon css pour avoir cet effet au lieu de mettre toutes les cases à cocher dans une seule colonne? En d'autres termes, je veux qu'il profite de l'espace vide à droite de celui-ci.

htmlcsscss3
10
adit

Vous pouvez ajouter à votre li une propriété pour en faire des éléments inline, ainsi qu'une largeur supplémentaire pour conserver deux colonnes:

ul.checkbox li { 
  border: 1px transparent solid; 
  display:inline-block;
  width:12em;
}

La démohttp://jsfiddle.net/pynhA/2/

15
DaniP

Le nombre de colonnes en CSS est très utile. Si vous mettez un saut de ligne après chaque élément de formulaire, vous pouvez faire une présentation assez nette. De même, en ajoutant <span style = "white-space: nowrap;">, l'étiquette est attachée à l'élément de case à cocher.

<!DOCTYPE html>
<html>
<head>
<style>
.newspaper {
    -webkit-column-count: 6; /* Chrome, Safari, Opera */
    -moz-column-count: 6; /* Firefox */
    column-count: 6;
}
</style>
</head>
<body>

<p>Here are a bunch of check boxes and their labels laid out nicely
<p><b>Note:</b> Internet Explorer 9, and earlier versions, does not support the column-count property.</p>

<div class="newspaper">

<span style="white-space: nowrap;"><input type="checkbox" name="data" value="some value" id="some id" /><label for="pizza stuff">something for your pizza</label></span><br/>
<span style="white-space: nowrap;"><input type="checkbox" name="data" value="some value" id="some id" /><label for="pizza stuff">something for your pizza</label></span><br/>
<span style="white-space: nowrap;"><input type="checkbox" name="data" value="some value" id="some id" /><label for="pizza stuff">something for your pizza</label></span><br/>
<span style="white-space: nowrap;"><input type="checkbox" name="data" value="some value" id="some id" /><label for="pizza stuff">something for your pizza</label></span><br/>
<span style="white-space: nowrap;"><input type="checkbox" name="data" value="some value" id="some id" /><label for="pizza stuff">something for your pizza</label></span><br/>
<span style="white-space: nowrap;"><input type="checkbox" name="data" value="some value" id="some id" /><label for="pizza stuff">something for your pizza</label></span><br/>
<span style="white-space: nowrap;"><input type="checkbox" name="data" value="some value" id="some id" /><label for="pizza stuff">something for your pizza</label></span><br/>
<span style="white-space: nowrap;"><input type="checkbox" name="data" value="some value" id="some id" /><label for="pizza stuff">something for your pizza</label></span><br/>
<span style="white-space: nowrap;"><input type="checkbox" name="data" value="some value" id="some id" /><label for="pizza stuff">something for your pizza</label></span><br/>
<span style="white-space: nowrap;"><input type="checkbox" name="data" value="some value" id="some id" /><label for="pizza stuff">something for your pizza</label></span><br/>
<span style="white-space: nowrap;"><input type="checkbox" name="data" value="some value" id="some id" /><label for="pizza stuff">something for your pizza</label></span><br/>
<span style="white-space: nowrap;"><input type="checkbox" name="data" value="some value" id="some id" /><label for="pizza stuff">something for your pizza</label></span><br/>
<span style="white-space: nowrap;"><input type="checkbox" name="data" value="some value" id="some id" /><label for="pizza stuff">something for your pizza</label></span><br/>
<span style="white-space: nowrap;"><input type="checkbox" name="data" value="some value" id="some id" /><label for="pizza stuff">something for your pizza</label></span><br/>
<span style="white-space: nowrap;"><input type="checkbox" name="data" value="some value" id="some id" /><label for="pizza stuff">something for your pizza</label></span><br/>
<span style="white-space: nowrap;"><input type="checkbox" name="data" value="some value" id="some id" /><label for="pizza stuff">something for your pizza</label></span><br/>
<span style="white-space: nowrap;"><input type="checkbox" name="data" value="some value" id="some id" /><label for="pizza stuff">something for your pizza</label></span><br/>
<span style="white-space: nowrap;"><input type="checkbox" name="data" value="some value" id="some id" /><label for="pizza stuff">something for your pizza</label></span><br/>
<span style="white-space: nowrap;"><input type="checkbox" name="data" value="some value" id="some id" /><label for="pizza stuff">something for your pizza</label></span><br/>
<span style="white-space: nowrap;"><input type="checkbox" name="data" value="some value" id="some id" /><label for="pizza stuff">something for your pizza</label></span><br/>
<span style="white-space: nowrap;"><input type="checkbox" name="data" value="some value" id="some id" /><label for="pizza stuff">something for your pizza</label></span><br/>

</div>

</body>
</html>
3
CAtoOH

Il y a une superbe propriété CSS3 disponible appelée column-count, elle peut être utilisée pour scinder des éléments de liste (ul & ol) en plusieurs colonnes. Voici un tutoriel détaillé complet Scinder la liste non ordonnée en plusieurs colonnes à l'aide de la propriété CSS3

1
Paritosh Pandey

éditer cette classe:

ul.checkbox li {
border: 1px transparent solid;
float: left;        /*  added  */
min-width: 200px;   /*  added  */
}

jsFiddle

0
Mohsen Safari