Grouping css flags 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; } For now, it looks like this . I wanted the group to have only 3 lines. So peperoni, sausage, mushrooms belongs to the first column, and then the next column next to it - gpeppes, xcheese, etc, etc What should I change in my CSS to have this effect instead of putting all the checkboxes in one column? In other words, I want him to use the empty space to his right.
+6
4 answers
The count column property in CSS is very useful. If you put a line break after each form element, you can make a pretty clean presentation. Also by adding <span style = "white-space: nowrap;" >, it holds the label attached to the checkbox element
<!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> +2
There is an available CSS3 property, available under the name column-count , it can be used to separate list items ( ul and ol ) into several columns here is a complete detailed tutorial Split an unordered list into several columns using the CSS3 property
+1