違い - ブロック 要素 インライン 要素 html5
ディスプレイでの入力:ブロックはブロックではありません。どうしてですか? (4)
あなたの最善の策は、あなたのボーダーやマージンなどで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>
なぜdisplay:block;width:auto; 私のテキスト入力でdivのように動作せず、コンテナの幅を埋める？
私はdivが自動幅を持つ単なるブロック要素であるという印象を受けました。 次のコードでは、divと入力が同じ次元を持つべきではありませんか？
入力を取得して幅を埋めるにはどうすればよいですか？ 入力にパディングと境界線があるため（最終ピクセル幅が1ピクセル+ 5ピクセル+ 100％+ 5ピクセル+ 1ピクセルになるため）、100％の幅は機能しません。 固定幅はオプションではなく、もっと柔軟なものを探しています。
私は回避策への直接の答えを好むだろう。 これは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%の入力にmax-width:100%を単に加えることであることを発見しましたwidth:100%;padding:5px; 。 しかし、これは（私は別の質問で尋ねる）より多くの疑問を提起するが、幅は通常のCSSボックスモデルを使用しており、最大幅はInternet Explorerのボーダーボックスモデルを使用しているようだ。 どのように非常に奇妙です。
Firefox 3のバグのようです。Internet Explorer 8とSafari 4では、最大幅を100％+パディング+ボーダーに制限しています。 最後に、Internet Explorerに何か正しいことがありました。
ああ私の神様、これは素晴らしいです！ この演奏の過程で、 Dean EdwardsとErik Arvidssonの大御所の助けを借りて、私は3つの別々のソリューションをまとめて、任意のパディングと境界線を持つ要素に対して真のクロスブラウザ100％幅を作りました。 以下の回答を参照してください。 このソリューションは、余分なHTMLマークアップ、クラス（またはセレクタ）、従来のInternet Explorerのオプションの動作を必要としません。
あなたはこれを偽造することができます：
<!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>
これを試して：
form { padding-right: 12px; overflow: visible; }
input { display: block; width: 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>
.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>
