javascript - HTML、CSS、JS - 将文本区域与表格显示中的标签对齐

Question

我正在使用以下 css 来对齐标签和文本区域

div     { display: table;      }
p       { display: table-row;  }
label   { display: table-cell; text-align: center;}
textarea{ display: table-cell; margin-left: 10px}

，改编自 Clément 来自这个问题 How to align input forms in HTML 的回答。我将第一段用作仅包含标签的标题。以下段落包含 textareas。

<div>
  <H4> h1 </H4>
  <p>
    <label>id</label>
    <label>name</label>
    <label>input1</label>
    <label>input2</label>
    <label>input3</label>
    <label>input4</label>
  </p>
  <p>
    <label>123213</label>
    <label>test1</label>
    <textarea title="1" style="border:1px solid black;"></textarea>
    <textarea title="2" style="border:1px solid black;"></textarea>
    <textarea title="3" style="border:1px solid black;"></textarea>
    <textarea title="4" style="border:1px solid black;"></textarea>
  </p>
  <p>
    <label>456</label>
    <label>test2</label>
    <textarea title="5" style="border:1px solid black;"></textarea>
    <textarea title="6" style="border:1px solid black;"></textarea>
    <textarea title="7" style="border:1px solid black;"></textarea>
    <textarea title="8" style="border:1px solid black;"></textarea>
  </p>
</div>

第一列和第二列及其标签 显示正确。正如 textareas 一样。但是，第一行的第三到第六个 label 没有按预期显示。第三个 label 的表格单元格似乎跨越了 textareas 的所有(而不是一个)表格单元格。第四到第六个 label 似乎显示在预期表格宽度之外的其他表格单元格中。

这是一个 JSFiddle:https://jsfiddle.net/3rrabvu6/1/

我希望每个 textarea 都显示在第一段的一个 label 下方。我怎样才能做到这一点？

Answer 1

试试这个

div     { display: table;      }
p       { display: table-row;  }
label   { display: table-cell; text-align: center;}
textarea{  margin-left: 10px}

<div>
  <H4> h1 </H4>
  <p>
    <label>id</label>
    <label>name</label>
    <label>input1</label>
    <label>input2</label>
    <label>input3</label>
    <label>input4</label>
  </p>
  <p>
    <label>123213</label>
    <label>test1</label>
    <label><textarea title="1" style="border:1px solid black;"></textarea></label>
    <label><textarea title="2" style="border:1px solid black;"></textarea></label>
    <label><textarea title="3" style="border:1px solid black;"></textarea></label>
    <label><textarea title="4" style="border:1px solid black;"></textarea></label>
  </p>
  <p>
    <label>456</label>
    <label>test2</label>
    <label><textarea title="5" style="border:1px solid black;"></textarea></label>
    <label><textarea title="6" style="border:1px solid black;"></textarea></label>
    <label><textarea title="7" style="border:1px solid black;"></textarea></label>
    <label><textarea title="8" style="border:1px solid black;"></textarea></label>
  </p>
</div>