display：blockを使用した入力はブロックではありませんが、なぜですか？

153

なぜdisplay:block;width:auto;私のテキスト入力にdiv要素のように動作し、コンテナの幅を埋めていませんか？

divは自動幅のブロック要素にすぎないという印象を受けました。次のコードでは、divと入力が同じ寸法であってはなりませんか？

幅を満たす入力を取得するにはどうすればよいですか？入力にパディングとボーダーがあるため、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自体の性質を変更することで解決できるかどうかを理解しようとしています。

わかりました、これは本当に奇妙です！解決策は、単にを使用max-width:100%して入力に追加することwidth:100%;padding:5px;です。ただし、これによりさらに多くの質問（別の質問で質問します）が発生しますが、幅は通常のCSSボックスモデルを使用し、最大幅はInternet Explorerのボーダーボックスモデルを使用しているようです。とても奇妙です。

OK、最後の1つはFirefox 3のバグのようです。InternetExplorer 8とSafari 4は、最大幅を100％+パディング+ボーダーに制限しています。最後に、Internet Explorerは問題を解決しました。

なんてこった、これは素晴らしい！これで遊んでいる過程で、そして由緒ある教祖ディーン・エドワーズと多くの助けを借りて試し Erik Arvidssonの 3つの個別のソリューションをつなぎ合わせて、任意のパディングとボーダーを持つ要素の真のクロスブラウザーを100％の幅にしました。以下の回答を参照してください。このソリューションでは、追加のHTMLマークアップは必要ありません。レガシーInternet Explorerのクラス（またはセレクター）とオプションの動作のみが必要です。

html  css 
— SpliFF
ソース
— ChristopheEblé
7
正確な複製ではない@SleepyCod。この質問は、inputCSS 2.1仕様を順守していないように見える要素の問題を扱っていますが、リンクした質問は、CSS 2.1仕様の範囲内で完全に発生するボックスのオーバーフローを防ぐ方法を尋ねています。質問とその解決策の両方が重複していますが、それらを正確な重複と呼ぶことは単に間違っています。
— 2013年

回答:

130

box-sizing:border-boxCSS 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が記述した動作を介してInternet Explorer 6とInternet Explorer 7をサポートし、ディーンエドワーズからのパーセンテージやその他の非ピクセル幅をサポートするように調整されています。

動作例の
動作（boxsizing.htc）

— SpliFF
ソース
これは素晴らしいソリューションのように見えますが、IE8では機能しません（divおよびfieldボックスは十分な幅ではありません）。このメソッドに更新があったかどうか知っていますか？ありがとう！
— rocketmonkeys
2
：ScheppによるこのポリフィルはオーバーgithubのでIE8でより多くのエッジケースと作業を処理するためのIE6 / 7ポリフィル更新github.com/Schepp/box-sizing-polyfill
— nicjohnson
ありがとう！<input type = text>と<input type = submit>の幅が300pxに設定されているのになぜ異なるのかを理解できませんでした。これで解決しました！2年後も、Firefoxの最新バージョンでは-moz-プレフィックスを使用する必要があることに注意してください。caniuse.com/#feat=css3-boxsizing
— ダレン・クック
4
残念ながら、マージンも追加する必要がある場合、このアプローチを使用してラッパーdivを削除することはできません（幅100％を使用するとマージンが要素で正しく機能しないため）
— SystemParadox
6
それでも問題は解決しません。はい、使用する場合は機能しますwidth:100%が、使用する場合は機能しません。jsfiddle.netwidth:auto / hGuzE
— nimrod
8

これが発生する理由は、テキスト入力のサイズがそのサイズ属性によって決定されるためです。<input>タグ内にsize = "50"を追加します。次に、それをsize = "100"に変更します-どういう意味ですか？

より良い解決策があると思いますが、頭に浮かぶのは、SOの「HTMLの非表示機能」の質問で見つけたものだけです。入力ではなく、コンテンツ編集可能なdivを使用してください。ユーザーの入力を囲んでいるフォームに渡す（必要な場合）には、少し注意が必要です。

HTMLの隠された機能

— MatrixFrog
ソース
8
CSSの人々がこれを正当化する方法を知りたいです。幅が明示的にピクセル/パーセンテージでサイズをオーバーライドできる場合、要素がブロックであるときになぜそれを引き続き継続する必要があるのか​​わかりません。
— SpliFF 2009年
1
しかし、属性buttonを持たないものにも同じことが起こりsizeますか？
— zanona
1
この答えのような「なぜこのような標準なのか」の部分にさらに焦点を当てた質問：stackoverflow.com/questions/4567988/…一番の主張inputは、置換された要素だからです。
— Ciro Santilli郝海东冠状病六四事件法轮功
7

あなたの最善の策は、境界線、マージンなどでdivに入力をラップし、幅100％で境界線なし、マージンなしなどで入力を内部に含めることです。

例えば、

<!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 {
                border: 1px solid red;
                padding: 5px;
            }
            input, form {
                display: block;
                width: 100%;
            }
        </style>
    </head>

    <body>
        <form>
            <div><input type="text" name="foo" /></div>
        </form>
    </body>
</html>
— ジョナサン・フィンランド
ソース
1
ええ、それはうまくいきますが、それは答えというよりは回避策です。入力がブロックの動作を無視するように見える理由を確立しようとしています。
— SpliFF 2009年
2
ジョナサン、ここで私の無礼を許してください、しかし私は正しい（tm）答えを探してここに来ました、そしてまた@SpliFFが彼が「回避策への直接的な答えを好むだろう」と具体的に述べている部分を喜んで読みました、それでもあなたはまだ別の冗長を追加しています一見問題の契約を無視して、答え（のように、SOで、他の場所、インターネット上の両方を何回も繰り返し）私はあなたを聞いても- 。 ？なぜ。事前にありがとう-Curiouslyあなたを。
— AMN
1

あなたはこのようにそれを偽造することができます：

<!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, #inputWrapper {
            border: 1px solid red;
        }
        #topDiv {
            padding: 5px;
            height: 5px;
        }
        form {
            display: block;
        }
        #inputWrapper {
            overflow: hidden;
            height: 15px;
        }
        input {
            display: block;
            width: 100%;
            border-style: none;
            padding-left: 5px;
            padding-right: 5px;
            height: 15px;
        }
        </style>
    </head>

    <body>
        <div id="topDiv"></div>
        <form>
          <div id="inputWrapper">
            <input type="text" name="foo" />
          </div>
        </form>
    </body>
</html>
— ジェイコブ
ソース
1
私は過去に偽のアプローチをしたことがありますが、正直なところ、うんざりしています。99％幅を使用して入力を取得し、一致するように選択するなど、あらゆる種類の遅延ハックが発生します。入力をdivのように処理する方法が本当に必要で、何か見落としているだけだと思っていました。
— SpliFF 2009年
2
また、内部パディングでwidth：100％のままであるため、入力はinputWrapperをオーバーフローします。
— SpliFF 2009年
1

これを試して：

form { padding-right: 12px; overflow: visible; }
input { display: block; width: 100%; }
— マイク
ソース
1
入力パディングと境界線を省略しました。あなたがしていることに気づくまで、私はあなたが間違っていると言っていました。今、私はメルクロがやろうとしていたことを理解しています（彼のコードはまだ間違っていますが、コンセプトはほとんどそこにありました）。padding-rightは、100％の意味を12px変更します（ボーダーと入力のパディング）。ただし、このアプローチの欠点は、フォームの他のすべての子もパディングの影響を受け、同様に補正する必要があることです。
— SpliFF 2009年
1

また、次のように偽造することもできます。

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

        <style>

            .container {
                width:90%;
            }

            .container div{
                border: 1px solid red;
                padding: 5px;
                font-size:12px;
                width:100%;
            }

            input{
                  width:100%;
                border: 1px solid red;
                font-size:12px;
                padding: 5px;
            }

            form {

                margin:0px;
                padding:0px;
            }

        </style>
    </head>

    <body>
        <div class="container">
            <div>
                asdasd
            </div>
            <form action="">
                <input type="text" name="foo" />
            </form>
        </div>
    </body>
</html>
— AlexC
ソース
1
上記と同じ確率で、100％幅の内部パディングがあります。それはあふれます。
— SpliFF 2009年
あなたはjavascriptでこれを行うことができます
— AlexC
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.