adit adit - 6 months ago 31
HTML Question

Grouping checkboxes css in multiple column layout

I have the following html

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


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


So far it looks like this. I wanted such that there's only 3 rows in the grouping. So that
peperoni, sausage, mushrooms
belongs to the first column, and then the next column next to it is
gpeppes, xcheese, etc, etc
. What should I modify in my css to have this effect instead of laying all the checkboxes in a single column? In other words I want it to take advantage of the empty space to the right of it..

Answer

You can add to your li a property to make it inline elements, an additional set a width to keep two columns:

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

The demo http://jsfiddle.net/pynhA/2/