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属性和值table table-row table-cell等的CSS复制表格。

为什么使用表格作为布局是不好的做法有很多原因。快速搜索将返回关于此问题的数十篇文章。

我认为主要原因是：表格布局不是语义;如果您没有显示表格数据，请不要使用表格。无法访问表格布局 - 使用屏幕阅读器的用户不会满意。一旦你习惯了CSS来为你的布局提供样式，你会发现它更容易维护。

＆＃13;

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

＆＃13;

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

＆＃13;

对齐字段集中的元素

1 个答案: