• 受付
  • 困ってます

<label>と<textarea>の位置がズレる

  • 質問No.9655666
  • 閲覧数81
  • ありがとう数0
  • 気になる数0
  • 回答数1

お礼率 13% (6/43)

おおよそ以下のような記述で備考欄<textarea>を作成しました。
横方向は固定させ、縦方向のみリサイズ可としました。

さらにmin-height と max-height で高さを制限しました。

最小値(min-height)の時には備考という文字(label)は textarea のちょうど真横に来る
ようにpaddingなどで位置を調整したのですが、最大値(max-height)までリサイズすると
ラベルが添付画像のように下の方にズレてしまいます。

textareaボックスの左上に固定、もしくは高さに合わせてボックスの真横にくっついてくる
ようにするにはどのように記述したら良いのでしょうか?


わかる方がいらっしゃいましたら教えてください。よろしくお願いします。


(HTML)

<div>
<label for="remark">
備考:
</label>
<textarea id="remark"></textarea>
</div>



(CSS)
textarea#remark {

width: 400px;
resize: vertical;
min-height: 50px;
max-height: 120px;
border-radius: 0.5em;

}

回答 (全1件)

  • 回答No.1

ベストアンサー率 72% (109/150)

Flexレイアウトを利用すれば容易に実現できます。

【HTML】
<div id="remark_wrapper">
<label for="remark">
備考:
</label>
<textarea id="remark"></textarea>
</div>

【CSS】
#remark_wrapper{
display: flex;
align-items: center; /* 高さに合わせてボックスの上下中央に配置 */
}
textarea#remark {
width: 400px;
resize: vertical;
min-height: 50px;
max-height: 120px;
border-radius: 0.5em;
}

textareaボックスの左上へ固定したい場合はalign-items: center;を消去してください。
AIエージェント「あい」

こんにちは。AIエージェントの「あい」です。
あなたの悩みに、OKWAVE 3,600万件のQ&Aを分析して最適な回答をご提案します。

関連するQ&A

その他の関連するQ&Aをキーワードで探す

ピックアップ

ページ先頭へ