Html 在多列布局中分组复选框css
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20027595/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Grouping checkboxes css in multiple column layout
提问by adit
I have the following html
我有以下 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:
和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, mushroomsbelongs 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..
到目前为止它看起来像这样。我想要这样的分组中只有 3 行。所以它peperoni, sausage, mushrooms属于第一列，然后它旁边的下一列是gpeppes, xcheese, etc, etc。我应该在我的 css 中修改什么来产生这种效果，而不是将所有复选框放在一个列中？换句话说，我希望它利用它右侧的空白空间..
回答by DaniP
You can add to your lia property to make it inlineelements, an additional set a width to keep two columns:
您可以添加到您的lia 属性以使其成为inline元素，另外设置一个宽度以保留两列：
ul.checkbox li {
border: 1px transparent solid;
display:inline-block;
width:12em;
}
The demo http://jsfiddle.net/pynhA/2/
回答by CAtoOH
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
CSS 中的列数属性非常有用。如果您在每个表单元素后放置一个换行符，您就可以制作一个非常干净的演示文稿。此外，通过添加 <span style="white-space: nowrap;">，它将标签附加到复选框元素
<!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>
回答by Paritosh Pandey
There is an awesome CSS3 Property available called column-count, it can be used to split list elements (ul& ol) into multiple columns
here is full detailed tutorial Split Unordered List Into Multiple Columns using CSS3 Property
有一个很棒的 CSS3 属性可用，称为column-count，它可用于将列表元素 ( ul& ol) 拆分为多列，这里是完整的详细教程Split Unordered List Into Multiple Columns using CSS3 Property
回答by Pawe?
You can add to your CSS:
您可以添加到您的 CSS：
.checkbox {
column-count: 2;
}
It will split your content into 2 columns.
它会将您的内容分成 2 列。
