0

チュートリアルから引っ張ってきたいくつかの CSS のベアボーンの例を作成しましたが、さらに説明できるかどうか疑問に思っています。

http://jsfiddle.net/4t55g/

セットアップでは、名前の入力フィールドが自動的に展開されて、開始ボタンの横のスペースが埋められます。ここでのキーはoverflow、それを含むスパンのプロパティのようです。hidden正しい幅に縮小できるように設定するのはなぜですか?

4

2 に答える 2

1

これは、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すると、テキストがボタンの下に流れます。

于 2013-04-11T18:24:10.720 に答える