テキストボックスは​​要素として扱われていますが、対応するテキストと一致していません

Question

3つのテキストボックスを1行に作成しようとしていますが、テキストボックスに隣接するテキストそれはテキストボックスの左（しかし下）にあることを示します。私は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

あなたtdスタイルにvertical-align: top;を追加（そしてあなたfieldsetにclass="table"を追加します）。

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>