html - 对齐字段集中的元素

Question

我正在尝试对齐标签和输入的组合。当前使用 fieldset > table > tr > td 结构。我在网上读到这通常是不好的做法，但是，我很难使用 CSS 来完成我需要的外观。

这是一个示例:

td.right {
  text-align: right;
}

fieldset {
  display: block;
  margin-left: 2px;
  margin-right: 2px;
  padding-top: 0.35em;
  padding-bottom: 0.625em;
  padding-left: 0.75em;
  padding-right: 0.75em;
  border: 2px groove;
}

<fieldset>
  <table>
    <tr>
      <td class="right">Date of Call:</td>
      <td><input class="datepicker2" name="callDate"></td>
      <td class="right">Caller code Number:</td>
      <td><input class="CodeMaker" name="callerCodeNum"></td>
      <td class="right">What is the jurisdiction?</td>
      <td><input type="text" name="jurisdiction"></td>
    </tr>
    <tr>
      <td class="right">Date of Offense:</td>
      <td><input class="datepicker2" name="crimeDate"></td>
      <td class="right">Time of Offense:</td>
      <td><input class="timePicker?" name="crimeTime"></td>
      <td class="right">Number:</td>
    </tr>
  </table>
</fieldset>

这可以很好地呈现表格格式(第一行有 3 个标签/输入组合，第二行有 3 个标签/输入组合)。基本上有 3 列。

如有任何意见，我们将不胜感激。

Answer 1

您可以使用具有 display 属性和值的 CSS 复制表格 table table-row table-cell 等等

使用表格进行布局是一种不好的做法，原因有很多。快速搜索将返回数十篇关于此问题的文章。

我认为主要原因是:表格布局不符合语义；如果您不显示表格数据，请不要使用表格。表格布局不可访问——使用屏幕阅读器的用户会不高兴。一旦您习惯了使用 CSS 为您的布局提供样式，您会发现它更易于维护。

fieldset {
  display: block;
  margin-left: 2px;
  margin-right: 2px;
  padding-top: 0.35em;
  padding-bottom: 0.625em;
  padding-left: 0.75em;
  padding-right: 0.75em;
  border: 2px groove;
}

.table {
  display: table;
}

.tr {
  display: table-row;
}

.td {
  display: table-cell;
  vertical-align: top;
}

.td.right {
  text-align: right;
}

<fieldset class="table">
  <div class="tr">
    <div class="td right">Date of Call:</div>
    <div class="td"><input class="datepicker2" name="callDate"></div>
    <div class="td right">Caller code Number:</div>
    <div class="td"><input class="CodeMaker" name="callerCodeNum"></div>
    <div class="td right">What is the jurisdiction?</div>
    <div class="td"><input type="text" name="jurisdiction"></div>
  </div>
  <div class="tr">
    <div class="td right">Date of Offense:</div>
    <div class="td"><input class="datepicker2" name="crimeDate"></div>
    <div class="td right">Time of Offense:</div>
    <div class="td"><input class="timePicker?" name="crimeTime"></div>
    <div class="td right">Number:</div>
  </div>
  <div class="tr">
    <div class="td right">Date of Call:</div>
    <div class="td"><textarea rows="5" cols="15"></textarea></div>
    <div class="td right">Caller code Number:</div>
    <div class="td"><textarea rows="5" cols="15"></textarea></div>
    <div class="td right">What is the jurisdiction?</div>
    <div class="td"><textarea rows="5" cols="15"></textarea></div>
  </div>
</fieldset>