0

私の目標は、ウィンドウのサイズ変更によって「こんにちは」スパンが押し下げられないようにすることです。

http://jsfiddle.net/5MjNL/5/

HTML

<div id='main'>
    <div class='container'>
        <input type='text' class='input-field'></input>
        <span class='foo'>hello</span>
    </div>
</div>

CSS

#main
{
    border:1px solid red;
    width: 100%;
    height: 300px;
}
.input-field
{
    border: 1px solid blue;
    width:70%;
}

jsfiddle で、ブラウザ ウィンドウをドラッグしてサイズを水平方向に縮小すると、ある時点で「hello」テキストを含む SPAN が押し下げられます。

テキスト フィールドの幅だけが縮小されるようにスタイルを設定するにはどうすればよいですか?

4

3 に答える 3

4

white-space: nowrap`.container に追加してみてください:

.container {
    white-space: nowrap;
}

または、flexbox を使用してみてください (これは古い構文と新しい構文をカバーしています):

.container {
    display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox;      /* TWEENER - IE 10 */
    display: -webkit-flex;     /* NEW - Chrome */
    display: flex;
}
于 2013-07-20T00:18:19.640 に答える
1

別のオプションとして、必要な最小幅を指定し、オーバーフローを自動として定義することができます。

これにより、div がまだ流動的で拡張されていることが確認されますが、ページ構造が混乱し始めたところで収縮が停止し、ユーザーはスクロールできるようになります。

http://jsfiddle.net/5MjNL/6/

#main
{
    border:1px solid red;
    width: 100%;
    min-width:300px;
    height: 300px;
    overflow: auto; 

}

.input-field
{
    border: 1px solid blue;
    width:70%;
}
.foo{

}
}
于 2013-07-20T00:26:33.913 に答える