html - html & css フォームが並んでいない

Question

テーブル内にコメントボックスを配置しようとしています (割り当て要求に従って)。カーソルの位置が、本来あるべき左上ではなく、ボックスの中央にあります。

HTML コード:

<tr>
<td>Comments: <input id="comment" type="text" name="Comment" class="comment"/></td>
</tr>

CSS コード:

#comment {
float: right; 
display: block; 
padding-right: 10px; 
width:70%;
height:100px;
}

score 2 · Accepted Answer

textarea複数行の入力には、通常の入力の代わりにa を使用してみてください。それがあなたが期待している行動だと思います。

<tr>
  <td>Comments: <textarea id="comment" name="Comment" class="comment"></textarea></td>
</tr>

score 0 · Accepted Answer

inputは単一行入力に使用されるため、デフォルトではインライン要素のように動作し、テキスト行は垂直方向に中央揃えになります。基本的に、CSS で高さを増やしても、その背の高いボックスには 1 行しか表示できません。改行を入力してみてください。

textareaしたがって、次のように代わりにa を使用する方がよい場合があります。

<td>Comments: <textarea id="comment" name="Comment" class="comment">Some text</textarea></td>

valueコンテンツは、属性ではなく開始タグと終了タグで囲まれていることに注意してください。

class="comment"また、CSS または JavaScript で使用する予定がない場合は、「コメント」クラス ( ) は必要ありません。

score 0 · Accepted Answer

これは「input」タグで発生します。代わりにテキストエリアを使用する必要があります。

<td>Comments: <textarea id="comment" name="Comment" class="comment"></textarea></td>

3 に答える 3