html - 在多列布局中对复选框 css 进行分组

Question

我有以下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 中修改什么来产生这种效果，而不是将所有复选框放在一个列中？换句话说，我希望它利用它右边的空白空间..

Answer 1

你可以给你的 li 添加一个属性，让它成为 inline 元素，另外设置一个宽度来保持两列:

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

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