こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

締切り済みの質問

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

おおよそ以下のような記述で備考欄<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;

}

投稿日時 - 2019-09-11 10:56:25

QNo.9655666

困ってます

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(1)

ANo.1

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;を消去してください。

投稿日時 - 2019-09-11 11:31:58

あなたにオススメの質問