BinaryDevelop
  1. ホーム
  2. html

[解決済み] display:blockの入力はブロックではありません、なぜですか？

2022-04-27 18:43:35

質問

なぜ display:block;width:auto; のテキスト入力は、div のようにコンテナの幅いっぱいに表示されないのですか？

divは単に幅がautoのブロック要素という印象があるのですが、実際はどうなのでしょうか？次のコードでは、div と input は同じ寸法であるべきではないでしょうか？

どうすれば入力が幅いっぱいになるのですか？入力にはパディングとボーダーがあるため、100%幅ではうまくいきません（最終的な幅は1ピクセル+5ピクセル+100%+5ピクセル+1ピクセルとなるため）。固定幅はオプションではないので、もっと柔軟なものを探しています。

回避策を直接回答してほしい。これはCSSの癖のようなもので、理解しておくと後で役に立つかもしれません。 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <title>width:auto</title>

        <style>
        div, input {
            border: 1px solid red;
            height: 5px;
            padding: 5px;
        }
        input, form {
            display: block;
            width: auto;
        }
        </style>
    </head>

    <body>
        <div></div>
        <form>
            <input type="text" name="foo" />
        </form>
    </body>
</html>

私はすでにラッパーで回避することができることを指摘する必要があります。ページのセマンティクスとCSSセレクタの関係を混乱させることは別として、私は問題の本質を理解し、INPUT自体の性質を変えることで克服できるのかどうかを考えています。

OK、これはTRULY奇妙だ! 解決策としては、単に max-width:100% という入力に width:100%;padding:5px; . しかし、これはさらに多くの疑問を引き起こしますが（これは別の質問で尋ねます）、widthは通常のCSSボックスモデルを使用し、max-widthはInternet Explorerのボーダーボックスモデルを使用しているようです。何とも奇妙な話です。

Internet Explorer 8 と Safari 4 では、最大幅を 100% + padding + border に制限しています。Internet Explorerはようやく正しいことをしたのです。

すごい！これはすごい これで遊んでいるうちに、由緒ある達人たちに助けられながら ディーン・エドワーズ と エリック・アルヴィドソン 私は、任意のパディングとボーダーを持つ要素で真のクロスブラウザ100%幅を実現するために、3つの別々の解決策を組み合わせることに成功しました。以下の回答をご覧ください。この解決策は、クラス（またはセレクタ）とレガシーInternet Explorerのオプションの動作だけで、追加のHTMLマークアップを必要としません。

どのように解決するのですか？

比較的知られていない box-sizing:border-box CSS 3 のスタイルでは、パディングやボーダーに関係なく、任意の要素で真の 100% 幅を実現できます。 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8">

        <title>Cross-browser CSS box-sizing:border-box</title>

        <style type="text/css">
            form {display:block; margin:0; padding:0; width:50%; border:1px solid green; overflow:visible}
            div, input {display:block; border:1px solid red; padding:5px; width:100%; font:normal 12px Arial}

            /* The voodoo starts here */
            .bb {
                box-sizing: border-box; /* CSS 3 rec */
                -moz-box-sizing: border-box; /* Firefox 2 */
                -ms-box-sizing: border-box; /* Internet Explorer 8 */
                -webkit-box-sizing: border-box; /* Safari 3 */
                -khtml-box-sizing: border-box; /* Konqueror */
            }
        </style>

        <!-- The voodoo gets scary. Force Internet Explorer 6 and Internet Explorer 7 to support Internet Explorer 5's box model -->
        <!--[if lt IE 8]><style>.bb {behavior:url("boxsizing.htc");}</style><![endif]-->
    </head>

    <body>
        <form name="foo" action="#">
            <div class="bb">div</div>
            <input class="bb" size="20" name="bar" value="field">
        </form>
    </body>
</html>

このソリューションは、Erik Arvidsson が書いた動作に Dean Edwards が手を加えて、パーセンテージや他の非ピクセル幅をサポートすることで Internet Explorer 6 と Internet Explorer 7 をサポートします。

動作例

ビヘイビア（boxsizing.htc）

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します