语义纯度

Question

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

现在我正在尝试使用CSS布局我的页面，但无法找到任何内容：

如何水平对齐7个复选框并将相应的标签置于复选框下方的中心位置？
如何水平对齐2个选项并将相应的标签置于选区上方？

最初的纯表格代码如下：

.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>内，这隐含地将标签与输入相关联以提供各种好的奖励。< / p>

它还使得更容易遵循标记，使用较少的嵌套容器。

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

完整示例

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

＆＃13;

* {
  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;
}

＆＃13;

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

＆＃13;

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>

水平的复选框布局与下面的标签

4 个答案:

语义纯度

完整示例