在多列布局中分组复选框css答案

【问题标题】：Grouping checkboxes css in multiple column layout在多列布局中分组复选框css
【发布时间】：2013-11-30 09:52:22
【问题描述】：

我有以下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> 
  <li><input type="checkbox" id="cb7" value="pineapple" /><label for="cb7">Pineapple</label></li> 
</ul> 
</fieldset>

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

到目前为止，它看起来像this。我希望分组中只有 3 行。这样peperoni, sausage, mushrooms 属于第一列，那么它旁边的下一列就是gpeppes, xcheese, etc, etc。我应该在我的 css 中修改什么来产生这种效果，而不是将所有复选框放在一个列中？换句话说，我希望它利用它右侧的空白空间..

【问题讨论】：

试试 ul.checkbox li { 边框：1px 透明实心；向左飘浮;宽度：12em； }

标签： html css

【解决方案1】：

您可以添加到您的 CSS：

.checkbox {
  column-count: 2;
}

它将您的内容分成 2 列。

【讨论】：

【解决方案2】：

有一个很棒的 CSS3 属性，叫做column-count，它可以用来将列表元素（ul & ol）拆分成多列这是完整的详细教程Split Unordered List Into Multiple Columns using CSS3 Property

【讨论】：

【解决方案3】：

CSS 中的列数属性非常有用。如果您在每个表单元素之后放置一个换行符，您可以做出一个非常干净的演示文稿。此外，通过添加，它保持标签附加到复选框元素

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

【讨论】：

【解决方案4】：

编辑这个类：

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

jsFiddle

【讨论】：

【解决方案5】：

您可以向您的li 添加一个属性以使其成为inline 元素，另外设置一个宽度以保持两列：

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

演示http://jsfiddle.net/pynhA/2/

【讨论】：

你救了我！！ stackoverflow.com/questions/45178766/…