Question

我正在制作一个表格并且喜欢它的外观，但我不能为我的生活找到一种更好的方式来展示它。

我看起来我想要的是所有标签彼此垂直对齐的地方。我在CodePen上发布了一些代码：Link

但这里简要介绍了我所做的事情：

HTML

<table>
<tr>
    <td><label for="f-name">Given Name: </label></td>
    <td><input type="text" id="f-name"></td>
</tr>
<tr>
    <td><label for="l-name">Family Name: </label></td>
    <td><input type="text" id="l-name"></td>
</tr>
<tr>
    <td><label for="address">Address: </label></td>
    <td><input type="text" id="address"></td>
</tr>
<tr>
    <td><label for="city">City: </label></td>
    <td><input type="text" id="city"></td>
</tr>

SASS

table
  margin: 0 auto
    td:first-child
      text-align: right

如果有人知道一种更简单的方法来实现这种效果，那就太棒了。

Answer 1

表是唯一能够以这种方式可靠地为多行提供水平对齐的元素。但是，正如您正确识别的那样，表格不应用于布局目的。因此，您必须找到另一种解决方案来对齐所有元素。我想到了两个合适的解决方案：

将所有元素浮动到右侧，为所有输入字段提供相同的宽度
以内联方式显示两个元素，并为所有标签提供相同的宽度

我会选择第二个选项，因为我不太喜欢浮动元素，因为如果不是通过任何奇怪的浏览器显示它的方式它们会显得更加破碎在那里。相比之下，具有设定宽度的内联元素相对安全，因为最坏的情况是，您的元素将简单地彼此相对，并且观看者可能甚至不会注意到它不是预期的布局。

＆＃13;

label, input {
  display: inline-block;
  width: 200px;
}
label {
  text-align: right;
}

＆＃13;

<div>
  <label for="f-name">Given Name:</label>
  <input type="text" id="f-name" />
</div>
<div>
  <label for="l-name">Family Name:</label>
  <input type="text" id="l-name" />
</div>
<div>
  <label for="address">Address:</label>
  <input type="text" id="address" />
</div>
<div>
  <label for="city">City:</label>
  <input type="text" id="city" />
</div>

＆＃13;

这个问题的一个可能的问题是你需要猜测你的标签的宽度并将这些猜测放入你的CSS中，所以基于浮点的解决方案在这里得到了一个很好的提及（它处理得更好，因为标签不是需要一个固定的宽度） - 然而在实践中，通常很容易找到一个全局适用的最大宽度，因为标签应该简洁，很少是完整的句子。

还有可能通过flexbox属性解决这个问题。这有绝对自动宽度分布的优点，但旧版浏览器不一定支持它（作为参考，请查看this graph on caniuse.com），所以除非你绝对需要这种功能，否则我会推荐上述方法

＆＃13;

.flex-container {
  background-color: #ddd;
  display: flex;
  margin: 0 auto;
  max-width: 500px;
}
label,
input {
  display: block;
}
label {
  flex: 1;
  line-height: 1.5em;
  margin-right: 0.5em;
  text-align: right;
}
input {
  display: block;
  width: 200px;
}

＆＃13;

<div class="flex-container">
  <label for="f-name">Given Name:</label>
  <input type="text" id="f-name" />
</div>
<div class="flex-container">
  <label for="l-name">Family Name:</label>
  <input type="text" id="l-name" />
</div>
<div class="flex-container">
  <label for="address">Address:</label>
  <input type="text" id="address" />
</div>
<div class="flex-container">
  <label for="city">City:</label>
  <input type="text" id="city" />
</div>

＆＃13;

Answer 2

你可以在没有表格的情况下做到这一点：

＆＃13;

body {
  font-family: "Roboto", sans-serif;
  margin: 0;
}
fieldset {
  border: none;
}
.question {
  margin: 0 auto;
  float: left;
  clear: left;
  width: 500px;
  height: 30px;
}
.question label {
  text-align: right;
  width: 250px;
  display: inline-block;
  line-height: 30px;
}

＆＃13;

<fieldset>
  <div class="question">
    <label for="f-name">Given Name:</label>
    <input type="text" id="f-name">
  </div>
  <div class="question">
    <label for="l-name">Family Name:</label>
    <input type="text" id="l-name">
  </div>
  <div class="question">
    <label for="address">Address:</label>
    <input type="text" id="address">
  </div>
  <div class="question">
    <label for="city">City:</label>
    <input type="text" id="city">
  </div>
</fieldset>

＆＃13;

这里的大部分造型都是随意的。关键是问题div的高度和标签行高匹配，因此标签对齐中心

如何将输入标签对齐以垂直对应？

2 个答案: