Question

我的目标是防止“hello”跨度被窗口调整大小推下来。

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

另一个选项可以是，指定你想要的最小宽度，并将overflow定义为auto，

这将确保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*/;
}

如何通过窗口大小调整来防止元素被推下？

3 个答案: