チュートリアルから引っ張ってきたいくつかの CSS のベアボーンの例を作成しましたが、さらに説明できるかどうか疑問に思っています。
セットアップでは、名前の入力フィールドが自動的に展開されて、開始ボタンの横のスペースが埋められます。ここでのキーはoverflow
、それを含むスパンのプロパティのようです。hidden
正しい幅に縮小できるように設定するのはなぜですか?
チュートリアルから引っ張ってきたいくつかの CSS のベアボーンの例を作成しましたが、さらに説明できるかどうか疑問に思っています。
セットアップでは、名前の入力フィールドが自動的に展開されて、開始ボタンの横のスペースが埋められます。ここでのキーはoverflow
、それを含むスパンのプロパティのようです。hidden
正しい幅に縮小できるように設定するのはなぜですか?
これは、CSS ボックス モデルがどのように機能するかを示す良い例です。
HTML は次のようになります。
<div class="formLine">
<button>start</button>
<span><input type="text" placeholder="enter a name"></span>
</div>
そして、次の CSS を検討してください。
.formLine {
width:50%;
outline: 2px dotted red;
}
.formLine span {
display: block;
overflow :hidden;
padding-right:5px;
}
.formLine input {
border: 2px dotted blue;
width: 100%;
}
.formLine button {
width: auto;
float:right;
}
フィドル: http://jsfiddle.net/audetwebdesign/ZkxBv/
機能する理由
親コンテナにはスパンが含まれているdisplay: block
ため、親要素の幅を埋めるために拡張されます。は<button>
右にフロートし、 のコンテンツがその<span>
周りを流れます。この場合、要素は<input>
タグ、インライン要素の 1 つだけです。input タグは、その親コンテナーである<span>
.
を宣言した場合overflow: visible
、入力フィールドは親コンテナーの幅全体を占め、ボタンの下の行を開始します。
ただし、 を宣言することoverflow: hidden
により、ブラウザーは別のことを行います。ブラウザーは、フローティング ボタンと同じ行にスパンを配置しようとし、スパンのコンテンツが長すぎると判断します (したがって、オーバーフロー状態)。ブラウザは、ボタンを収容するためにスパンをクリップし、それに応じてコンテンツをラップしようとします。この場合、入力ボタンの幅は可変なので、縮小してスペースを埋めます。非常に巧妙で、有用な結果が得られます。
入力ボタンを単純なテキストに置き換えると、その効果を確認できます。
<div class="formLine">
<button>start</button>
<span><em>Some line with a few words that are not too long. As you can see, the text tries to flow around the button on the right.</em></span>
</div>
この場合、単語はボタンに流れ (下にはありません)、折り返されて新しい行が形成されます。表示に変更overflow
すると、テキストがボタンの下に流れます。