设置复选框列表样式的最佳方法是什么 [英] What is the best way to style a list of checkboxes

问题描述

我想要实现的是这样的布局

<前>一些标签 [ ] 复选框 1[ ] 复选框 2[ ] 复选框 3[ ] 复选框 4

[ ] 代表一个复选框

什么标记和 CSS 最适合用于此目的?我知道这很容易用一张桌子来做我想知道这是否可以通过 div 实现

解决方案

我会使用这个标记:

<label>一些标签</label><ul><li><input type="checkbox">复选框 1<li><input type="checkbox">复选框 2<li><input type="checkbox">复选框 3<li><input type="checkbox">复选框 4

以及这些样式:

#checkboxes 标签 {向左飘浮;}#checkboxes ul {边距:0；列表样式:无；向左飘浮;}

表格不是邪恶的，但它们经常被用于错误的原因.它们产生更大的 html 文件(对性能和带宽不利)，通常具有更混乱的 html 结构(对可维护性不利).然而，至于表格数据，它们非常好.

What I'd like to achieve is a layout like this

some label  [ ] checkbox 1
            [ ] checkbox 2
            [ ] checkbox 3
            [ ] checkbox 4

[ ] represents a checkbox

What markup and CSS would be best to use for this? I know this would be easy to do with a table I'm wondering if this is possible with divs

解决方案

I would use this markup:

<div id="checkboxes">
  <label>some label</label>
  <ul>
    <li><input type="checkbox"> checkbox 1</li>
    <li><input type="checkbox"> checkbox 2</li>
    <li><input type="checkbox"> checkbox 3</li>
    <li><input type="checkbox"> checkbox 4</li>
  </ul>
</div>

and these styles:

#checkboxes label {
  float: left;
}
#checkboxes ul {
  margin: 0;
  list-style: none;
  float: left;
}

Tables aren't evil, but they're used for the wrong reasons more often than not. They make for bigger html-files (bad for performance and bandwidth), usually with a more cluttered html-structure (bad for maintainability). As for tabular data however, they are excellent.

这篇关于设置复选框列表样式的最佳方法是什么的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！