Formatting elements in columns and rows
To avoid reinventing the wheel, I am generating a form using CakePHP's form helper, which create the following markup:
<div class="input select">&开发者_StackOverflow社区lt;label for="ReportFruit">Fruit</label>
<input type="hidden" name="data[Report][Fruit]" value="" id="ReportFruit" />
<div class="checkbox"><input type="checkbox" name="data[Report][Fruit][]" value="0" id="ReportFruit0" /><label for="ReportFruit0">Banana</label></div>
<div class="checkbox"><input type="checkbox" name="data[Report][Fruit][]" value="1" id="ReportFruit1" /><label for="ReportFruit1">Apple</label></div>
<div class="checkbox"><input type="checkbox" name="data[Report][Fruit][]" value="2" id="ReportFruit2" /><label for="ReportFruit2">Pear</label>
...
</div>
</div>
Which generates a bunch of checkboxes in this format:
[] Banana
[] Apple
[] Pear
[] ...
I would like to format them so they display like so: (ideally I would still be able to set the number of options per row, but if not it's fine too)
[] Banana [] Apple [] Pear
[] Mango [] Lemon [] ...
Can I accomplish this using CSS only or would I have to manipulate the DOM using JS (or change the markup with PHP before I output it)?
You can use the following CSS:
div.checkbox { float: left; width: 31%; margin-right: 1% }
(the 1% is for rounding issues; decrease the width and increase margin-right as you see fit. You can also use Pixel values of course)
This will distribute the check boxes and their labels across three columns. However, with long labels that wrap across multiple lines, you may get distribution issues (try it out to see what I mean).
To prevent that, give every 3rd column the additional class newline:
<div class="checkbox newline">
and define in CSS:
div.checkbox.newline { clear: left }
The column count property in CSS is pretty helpful. 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 keeps the label attached to the check box 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="Fruit">Banana</label></span><br/>
<span style="white-space: nowrap;"><input type="checkbox" name="data" value="some value" id="some id" /><label for="Fruit">Apple</label></span><br/>
<span style="white-space: nowrap;"><input type="checkbox" name="data" value="some value" id="some id" /><label for="Fruit">Pear</label></span><br/>
<span style="white-space: nowrap;"><input type="checkbox" name="data" value="some value" id="some id" /><label for="Fruit">Banana</label></span><br/>
<span style="white-space: nowrap;"><input type="checkbox" name="data" value="some value" id="some id" /><label for="Fruit">Apple</label></span><br/>
<span style="white-space: nowrap;"><input type="checkbox" name="data" value="some value" id="some id" /><label for="Fruit">Pear</label></span><br/>
<span style="white-space: nowrap;"><input type="checkbox" name="data" value="some value" id="some id" /><label for="Fruit">Banana</label></span><br/>
<span style="white-space: nowrap;"><input type="checkbox" name="data" value="some value" id="some id" /><label for="Fruit">Apple</label></span><br/>
<span style="white-space: nowrap;"><input type="checkbox" name="data" value="some value" id="some id" /><label for="Fruit">Pear</label></span><br/>
<span style="white-space: nowrap;"><input type="checkbox" name="data" value="some value" id="some id" /><label for="Fruit">Banana</label></span><br/>
<span style="white-space: nowrap;"><input type="checkbox" name="data" value="some value" id="some id" /><label for="Fruit">Apple</label></span><br/>
<span style="white-space: nowrap;"><input type="checkbox" name="data" value="some value" id="some id" /><label for="Fruit">Pear</label></span><br/>
<span style="white-space: nowrap;"><input type="checkbox" name="data" value="some value" id="some id" /><label for="Fruit">Banana</label></span><br/>
<span style="white-space: nowrap;"><input type="checkbox" name="data" value="some value" id="some id" /><label for="Fruit">Apple</label></span><br/>
<span style="white-space: nowrap;"><input type="checkbox" name="data" value="some value" id="some id" /><label for="Fruit">Pear</label></span><br/>
<span style="white-space: nowrap;"><input type="checkbox" name="data" value="some value" id="some id" /><label for="Fruit">Banana</label></span><br/>
<span style="white-space: nowrap;"><input type="checkbox" name="data" value="some value" id="some id" /><label for="Fruit">Apple</label></span><br/>
<span style="white-space: nowrap;"><input type="checkbox" name="data" value="some value" id="some id" /><label for="Fruit">Pear</label></span><br/>
<span style="white-space: nowrap;"><input type="checkbox" name="data" value="some value" id="some id" /><label for="Fruit">Banana</label></span><br/>
<span style="white-space: nowrap;"><input type="checkbox" name="data" value="some value" id="some id" /><label for="Fruit">Apple</label></span><br/>
<span style="white-space: nowrap;"><input type="checkbox" name="data" value="some value" id="some id" /><label for="Fruit">Pear</label></span><br/>
</div>
</body>
</html>
加载中,请稍侯......
精彩评论