html - 如何在不同的 div 中左对齐文本区域？

Question

我想在两个不同的 div 中左对齐文本区域。

以下是已经尝试过的方法，但它不起作用。

.credentials {
  margin-top: -5px;
  background-color: black;
}
label {
  margin-left: 20px;
  color: white;
  vertical-align: middle;
}
textarea {
  vertical-align: middle;
  height: 25px;
  margin-top: 10px;
  margin-left: 30px;
}
.username {
  height: 50px;
}

<div class="credentials">
  <div class="username">
    <label>Username:</label>
    <textarea></textarea>
  </div>
  <div class="key">
    <label>Activation key:</label>
    <textarea></textarea>
  </div>
</div>

输出结果如下:

Answer 1

试试这个 CSS 表格布局(无标记更改)。设置容器 div作为table , 和两个内部 div作为table-row , 和 label + textarea作为table-cell ，以及其他一些 CSS 调整，请参阅代码段中的注释。

.credentials {
  display: table;
  width: 100%;
  background: black;
  border-collapse: separate;
  border-spacing: 10px; /*for spacing*/
}
.username, .key {
  display: table-row;
}
label, textarea {
  display: table-cell;
  vertical-align: middle; /*or top/bottom*/
}
label {
  width: 1%; /*small value*/
  white-space: nowrap; /*prevent wrapping*/
  color: white;
}

<div class="credentials">
  <div class="username">
    <label>Username:</label>
    <textarea></textarea>
  </div>
  <div class="key">
    <label>Activation key:</label>
    <textarea></textarea>
  </div>
</div>

编辑: 正如下面的评论之一指出的那样使用 <input>元素而不是 <textarea> ，我认为这是有道理的。查看更新后的代码片段。

.credentials {
  display: table;
  width: 100%;
  background: black;
  border-collapse: separate;
  border-spacing: 10px; /*for spacing*/
}
.credentials .username,
.credentials .key {
  display: table-row;
}
.credentials label,
.credentials input[type="text"],
.credentials input[type="password"]{
  display: table-cell;
  vertical-align: middle;
  padding: 4px;
}
.credentials label {
  width: 1%; /*small value*/
  white-space: nowrap; /*prevent wrapping*/
  color: white;
}

<div class="credentials">
  <div class="username">
    <label>Username:</label>
    <input type="text">
  </div>
  <div class="key">
    <label>Activation key:</label>
    <input type="password">
  </div>
</div>