html - 如何防止元素被窗口调整大小下推？

Question

我的目标是防止“你好”跨度被窗口调整大小推倒。

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 将被下推。

如何设置我的样式以便仅减小文本字段宽度？

Answer 1

尝试添加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;
}

Answer 2

另一个选项可以是，指定您想要的最小宽度并将溢出定义为自动，

这将确保 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{

}
}

Answer 3

如果你真的想要这种行为，你可以考虑使用百分比。您可以但不必这样做：

#main{
  width:/*percentage of choice here*/;
}
.contianer{
  width:/*percentage of choice here*/;
}
.input-field{
  width:/*percentage of choice here*/;
}
.foo{
  width:/*not a percentage width here*/;
}