QA@IT

html のinput="text"のタグの幅を自動的に最大に設定したい。

44041 PV

HTMLのタグというかCSSというかデザインについて困っています。
表現がよく解らないのですが、よくアンケートであるような

名前:鈴木一郎
年齢:51歳

みたいな項目を作ろうとしています。
以下のようなタグを作成しました。

<table>
<tr>
<td style="width:100px">
  <img src="/assets/dummy.png">&nbsp;名前&nbsp;:&nbsp;
</td>
<td>
  <input type="text" placeholder="名前を設定してください。">
</td>
</tr>
</table>

これをダイアログの中に表示して、アンケートの入力欄のようなものを作ろうとしています。
問題となっているのは、名前の入力欄(inputタグの所)の横幅が可変という事です。

左の列の「名前」とかの欄は固定の幅(100px)なのですが、右側の入力欄は、残りの枠の幅で最大値に設定したいのです。
右側の列のTDに「width=100%」を付与すると、今度は左側の列がつぶれてしまい、文字と画像が乱れてしまいます。

出来れば、左側の列を固定にして、右側の列の幅を可変にし、テキストボックスを最大まで広げるような作りにしたいのですが、そのような事は可能なのでしょうか?

いくつかサンプルを見ていると、やはり大きさが可変のコントロールはそこそこ難易度が高いようですが、やはり無理があるのでしょうか?

回答

こんな感じでしょうか。

<table>
    <tr>
        <td style="width:100px">
            <img src="/assets/dummy.png">&nbsp;名前&nbsp;:&nbsp;
        </td>
        <td style="position:relative">
            <input type="text" style="width:100%; box-sizing:border-box" placeholder="名前を設定してください。">
        </td>
    </tr>
</table>
編集 履歴 (0)
  • ありがとうございます!positionとbox-sizingってこうやって使うものなんですね…。ありがとうございました。
    -
ウォッチ

この質問への回答やコメントをメールでお知らせします。