下方带有标签的水平复选框布局

Question

在几年没有做任何网页设计之后，我才开始为自己编写一个小页面。正如我现在了解到的那样，用表格布置页面不再是最先进的（不确定是否真的如此）。

现在我正在尝试使用 CSS 布局我的页面，但在以下位置找不到任何内容：

如何水平对齐7个复选框，并将相应的标签居中放置在复选框下方？
如何水平对齐2个selects并将相应的label居中放置在selects之上？

最初的纯表格代码如下：

.form fieldset {
  display: table;
  border: 1px solid #c6c7cc;
  border-radius: 5px;
}
.form label {
  display: table-cell;
  text-align: right;
  padding: 5px;
}
.form input,
.form select {
  display: table-cell;
}
.form .cssRow {
  display: table-row;
}
.form .submit {
  display: table-cell;
  caption-side: bottom;
  display: table-caption;
  text-align: center;
}

<table>
  <tr>
    <td align="right">Name</td>
    <td align="left">
      <input name="name" type="text">
    </td>
  </tr>
  <tr>
    <td align="right">Day(s) of week</td>
    <td align="center">
      <table>
        <tr>
          <td align="center">
            <input type="checkbox" name="day[]" value="mo" checked>
          </td>
          <td align="center">
            <input type="checkbox" name="day[]" value="tu" checked>
          </td>
          <td align="center">
            <input type="checkbox" name="day[]" value="we" checked>
          </td>
          <td align="center">
            <input type="checkbox" name="day[]" value="th" checked>
          </td>
          <td align="center">
            <input type="checkbox" name="day[]" value="fr" checked>
          </td>
          <td align="center">
            <input type="checkbox" name="day[]" value="sa" checked>
          </td>
          <td align="center">
            <input type="checkbox" name="day[]" value="su" checked>
          </td>
        </tr>
        <tr>
          <td align="center">Mo</td>
          <td align="center">Tu</td>
          <td align="center">We</td>
          <td align="center">Th</td>
          <td align="center">Fr</td>
          <td align="center">Sa</td>
          <td align="center">Su</td>
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td align="right">Validity</td>
    <td align="center">
      <table>
        <tr>
          <td>Valid from</td>
          <td>Valid to</td>
        </tr>
        <tr>
          <td>
            <select>
              <option>January</option>
              <option>February</option>
            </select>
          </td>
          <td>
            <select>
              <option>January</option>
              <option>February</option>
            </select>
          </td>
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td align="center" colspan="2">
      <input type="submit" name="submit" value="Refresh">
    </td>
  </tr>
</table>

My CSS attempt so far looks like this:

<div class="form">
  <fieldset>
    <legend>Search</legend>
    <div class="cssRow">
      <label for="name">Name</label>
      <input name="name" type="text" size="30" maxlength="30">
    </div>
    <div class="cssRow">
      <label for="day[]">Day(s) of week</label>
      <input name="day[]" type="text" value="ToDo" size="30" disabled>
    </div>
    <div class="cssRow">
      <label>Validity</label>
      <input type="text" value="ToDo" size="30" disabled>
    </div>
    <div class="submit">
      <input type="submit" name="submit" value="Suchen">
    </div>
  </fieldset>
</div>

为了说明我的问题，我创建了以下 JSFiddle：http://jsfiddle.net/c9a7ezyk/

欢迎提出任何建议，尽管我更喜欢简单的解决方案，因为我正在（重新）学习 HTML 和 CSS。

Answer 1

带标签的复选框：

<div class="checkbox-label">
  <label for="checkbox">Sunday</label>
  <div class="checkbox-container">
    <input name="checkbox" type="checkbox">
  </div>
</div>

.checkbox-label {
  display: inline-block
}

.checkbox-container {
  text-align: center;
}

注意复选框是内联的，因此您可以将其放入容器中并使用 text-align: center

另请注意，我在 .checkbox-label 上使用了 display: inline-block 以便它们可以水平对齐（块元素，默认为 div，占据一整行并将以下元素放在下面它)

我对选择使用相同的原则你可以在这里看到整个事情： http://codepen.io/Vall3y/pen/QwdWOe

Answer 2

我更喜欢与其他答案略有不同的方法，其中 <input> 元素嵌套在 <label> 内，这隐式地将标签与输入相关联以提供各种不错的奖励.

它还使标记更易于遵循，嵌套容器更少。

Example

<label>
    <input type="checkbox">
    <span class="label">Sunday</span>
</label>

然后

label {
    display: inline-block;
    text-align: center;
}
span.label {
    display: block;
}

注意单击标签如何正确选中关联的复选框。选择的行为方式完全相同。因为 <input> 和 <select> 默认是内联的，这意味着它们会受到 text-align: center.

的影响

Answer 3

语义纯度

我有点像 HTML 纯粹主义者，所以这是一个没有任何额外标记的 HTML 表格：

图例向左浮动并使用与图例高度匹配的行高垂直居中
输入被包装在带有 display: inline-block 的标签中，该标签被赋予宽度以强制文本位于输入下方/上方
fieldset:before 属性允许我们将标签垂直居中 vertical-align: middle

完整示例

背景颜色只是为了说明布局。

* {
  margin: 0;
  padding: 0;
}
fieldset {
  border: none;
  height: 70px;
}
fieldset:before {
  content: '';
  display: inline-block;
  vertical-align: middle;
  height: 100%;
  background: #F90;
  width: 0;
}
legend {
  height: 100%;
  line-height: 70px;
  width: 150px;
  text-align: center;
  background: #F90;
  float: left;
}
input[type=checkbox] {
  margin: 0 5px;
}
.days label {
  background: #F90;
  width: 30px;
  display: inline-block;
  vertical-align: middle;
  text-align: center;
}
.validity label {
  background: #F90;
  width: 100px;
  display: inline-block;
  vertical-align: middle;
  text-align: center;
}

<form>
  <fieldset class="days">
    <legend>Day(s) of Week</legend>
    <label for="monday">
      <input type="checkbox" id="monday" />Mo
    </label>
    <label for="tuesday">
      <input type="checkbox" id="tuesday" />Tu
    </label>
    <label for="wednesday">
      <input type="checkbox" id="wednesday" />We
    </label>
    <label for="thursday">
      <input type="checkbox" id="thursday" />Th
    </label>
    <label for="friday">
      <input type="checkbox" id="friday" />Fr
    </label>
    <label for="saturday">
      <input type="checkbox" id="saturday" />Sa
    </label>
    <label for="sunday">
      <input type="checkbox" id="sunday" />Su
    </label>
  </fieldset>
  <fieldset class="validity">
    <legend>Validity</legend>
    <label for="from">Valid From
      <select id="from">
        <option>Option</option>
      </select>
    </label>
    <label for="to">Valid to
      <select id="to">
        <option>Option</option>
      </select>
    </label>
  </fieldset>
</form>

Answer 4

Demo here

代码如下：

<html>
<body>

<div>Name&nbsp;&nbsp;<input type="text"></input></div><br>

<div>Day(s) of week</div>

<div style="margin-left: 120px;margin-top: -25px;">

    <div><input type="checkbox" checked><br>Mo</input></div>

    <div style="
    width: 10px;
    margin-left: 30px;
    margin-top: -37px;">
        <input type="checkbox" checked><br>Tu</input></div>

    <div style="
    width: 10px;
    margin-left: 60px;
    margin-top: -37px;">
    <input type="checkbox" checked><br>We</input></div>

    <div style="
    width: 10px;
    margin-left: 90px;
    margin-top: -37px;">
    <input type="checkbox" checked><br>Th</input></div>

    <div style="
    width: 10px;
    margin-left: 120px;
    margin-top: -37px;">
    <input type="checkbox" checked><br>Fr</input></div>

    <div style="
    width: 10px;
    margin-left: 150px;
    margin-top: -37px;">
    <input type="checkbox" checked><br>Sa</input></div>

    <div style="
    width: 10px;
    margin-left: 180px;
    margin-top: -37px;"><input type="checkbox" checked><br>Su</input>
    </div>

</div>
<br>

<div>Validity
    <select>
        <option>January</option>
        <option>February</option>
    </select>

    <select>
        <option>January</option>
        <option>February</option>
    </select>
</div>

</body>
</html>

下方带有标签的水平复选框布局

Horizontal checkbox layout with label underneath

html

css

checkbox

语义纯度

完整示例