☰

100% 幅のテキスト ボックスがコンテナーを超えて拡張しないようにできますか? 質問する

tag-icon • tag-icon html css
100% 幅のテキスト ボックスがコンテナーを超えて拡張しないようにできますか? 質問する

1 行全体を埋めたいテキスト ボックスがあるとします。次のようなスタイルを設定します。

input.wide {display:block; width: 100%}

幅はテキスト ボックスの内容に基づいているため、問題が発生します。テキスト ボックスには、デフォルトで余白、境界線、およびパディングがあるため、100% 幅のテキスト ボックスはコンテナーよりも大きくなります。

たとえば、右側は次のようになります。

ここに画像の説明を入力してください

テキスト ボックスをコンテナーの幅いっぱいに広げずに、コンテナーの幅いっぱいにする方法はありますか?

私の言いたいことを示す HTML の例を次に示します。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Untitled Page</title>
    <style type="text/css">
        #outer{border: 1px solid #000; width: 320px; margin: 0px;padding:0px}
        #inner{margin: 20px; padding: 20px; background: #999;border: 1px solid #000;}
        input.wide {display:block; margin: 0px}
        input.normal {display:block; float: right}
    </style>
</head>
<body>
    <div id="outer">
        <div id="inner">
            <input type="text" class="wide" />
            <input type="text" class="normal" />
            <div style="clear:both;"></div>
        </div>
    </div>
</body>
</html>

これを実行すると、「通常」のテキスト ボックスを見ると、「ワイド」のテキスト ボックスがコンテナーからはみ出していることがわかります。「通常」のテキスト ボックスは、コンテナーの実際の端まで浮いています。私は、「通常」のテキスト ボックスのように端を超えて拡張することなく、「ワイド」のテキスト ボックスをコンテナー全体に表示しようとしています。

ベストアンサー1

テキスト ボックスをコンテナーの幅いっぱいに広げずに、コンテナーの幅いっぱいにする方法はありますか?

はい。CSS3 プロパティ「box-sizing: border-box」を使用すると、「width」の意味を再定義して、外部のパディングと境界線を含めることができます。

残念ながら、CSS3 であるため、サポートがまだ十分に成熟しておらず、仕様策定プロセスがまだ完了していないため、当面はブラウザーごとに異なる一時的な名前が付けられています。そのため、次のようになります。

input.wide {
    width: 100%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

昔ながらの代替方法は、単に、ブラウザーが入力に対して与えると予想される左右の余白/境界線の量を 'px' 単位でほぼ等しい量の 'padding-right' を、囲んでいる <div> または <td> 要素に配置することです。(通常、IE<8 の場合は 6px)

おすすめ記事