被css视为元素的文本框未与相应的文本对齐

Question

我正在尝试连续创建三个文本框，但是应该与文本框相邻（左侧）的文本被向下推，以便它位于文本框的左侧（但下方）。我已经包含了html和css。

fieldset {
  display: block;
  /*margin: 0 auto;*/
  /*text-align: center;*/
  /*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;
}


/*the .table class id was originally provided by stackoverflow, however, when using it on the fieldset
    it causes everything to be aligned to the left.
    */

.table {
  display: table;
  /*text-align: center;*/
  /*margin: 0 auto;*/
}

.tr {
  display: table-row;
}

.td {
  display: table-cell;
  text-align: left;
}

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

<fieldset>
  <div class="tr">
    <div class="td right">Scars, Marks, Tattoos (Describe):</div>
    <div class="td"><textarea name="susScarsEtc" rows="5" cols="20">Nothing notable.</textarea></div>
    <div class="td right">General Appearance (Describe):</div>
    <div class="td"><textarea name="susGenAppear" rows="5" cols="20">Nothing notable.</textarea></div>
    <div class="td right">Distinguishing Handicap(s) (Describe):</div>
    <div class="td"><textarea name="susHandicap" rows="5" cols="20">Nothing notable.</textarea></div>
  </div>
</fieldset>

Answer 1

将vertical-align: top;添加到td个样式中（并将class="table"添加到fieldset）。

＆＃13;

＆＃13;

fieldset {
  display: block;
  /*margin: 0 auto;*/
  /*text-align: center;*/
  /*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;
}


/*the .table class id was originally provided by stackoverflow, however, when using it on the fieldset
    it causes everything to be aligned to the left.
    */

.table {
  display: table;
  /*text-align: center;*/
  /*margin: 0 auto;*/
}

.tr {
  display: table-row;
}

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

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

＆＃13;

<fieldset class="table">
  <div class="tr">
    <div class="td right">Scars, Marks, Tattoos (Describe):</div>
    <div class="td"><textarea name="susScarsEtc" rows="5" cols="20">Nothing notable.</textarea></div>
    <div class="td right">General Appearance (Describe):</div>
    <div class="td"><textarea name="susGenAppear" rows="5" cols="20">Nothing notable.</textarea></div>
    <div class="td right">Distinguishing Handicap(s) (Describe):</div>
    <div class="td"><textarea name="susHandicap" rows="5" cols="20">Nothing notable.</textarea></div>
  </div>
</fieldset>

＆＃13;

＆＃13;

＆＃13;