文本框被视为< td> CSS的元素未与相应文本对齐 [英] Textboxes being treated as <td> elements by css are not aligning with corresponding text

问题描述

我正在尝试连续创建三个文本框，但是文本框应该（在左侧）相邻的文本被向下推，因此该文本框在文本框的左侧（但在下面）。我已经包含了html和css。

I'm trying to create three textboxes in a row, but the text that should be adjacent (to the left) to the text boxes is being pushed down so that it is to the left (but below) the text boxes. I've included the html and 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>

推荐答案

将 vertical-align：top; 添加到您的 td 样式中（并添加 class = table 到您的字段集）。

Add vertical-align: top; to your td styles (and add class="table" to your fieldset).

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

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

这篇关于文本框被视为< td> CSS的元素未与相应文本对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！