分组复选框CSS在多个列布局 [英] Grouping checkboxes css in multiple column layout

问题描述

我有以下html

 < fieldset class =group> 
<图例>选择标准比萨浇头< /图例> 
< ul class =checkbox> 
< input type =checkboxid =cb1value =pepperoni/>< label for =cb1> Pepperoni< / label>< / li> 
< li>< input type =checkboxid =cb2value =sausage/>< label for =cb2>香肠< / label>< / li> 
< li>< input type =checkboxid =cb3value =mushrooms/>< label for =cb3>蘑菇< / label>< / li> 
< li>< input type =checkboxid =cb4value =onions/>< label for =cb4>洋葱< / label>< / li> 
< li>< input type =checkboxid =cb5value =gpeppers/>< label for =cb5> Green Peppers< / label>< / li> 
< input type =checkboxid =cb6value =xcheese/>< label for =cb6>Extra Cheese< / label>< / li> ; 
< / ul> 
< / fieldset> 
  

和css：

  fieldset.group {
 margin：0; 
 padding：0; 
 margin-bottom：1.25em; 
填充：.125em; 
} 
 
 fieldset.group legend {
 margin：0; 
 padding：0; 
 font-weight：bold; 
 margin-left：20px; 
 font-size：100％; 
颜色：黑色; 
} 
 
 
 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; 
} 
  

到目前为止，它看起来像这个。我希望分组中只有3行。因此，香肠，香肠，蘑菇属于第一列，然后旁边的下一列是 gpeppes，xcheese等等， code>。我应该修改我的CSS来产​​生这种效果，而不是将所有复选框放在一个列中？换句话说，我希望它能利用它右侧的空白空间。 解决方案

您可以添加到您的 li 使它成为 inline 元素的属性，额外设置一个宽度以保留两列：

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

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

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

解决方案

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/

这篇关于分组复选框CSS在多个列布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！