Question

我有一个div，在div中有几个输入框，我的div有一个固定的高度。我想让它溢出到右边而不是底部。

<div>
<input type="text"/><br>
<input type="text"/><br>
<input type="text"/><br>
<input type="text"/><br>
<input type="text"/><br>
<input type="text"/><br>
<input type="text"/><br>
<input type="text"/><br>
<input type="text"/><br>
<input type="text"/><br>
<input type="text"/><br>
<input type="text"/><br>
<input type="text"/><br>

div {
  overflow:hidden;
  white-space:nowrap;
  width:200px;
  height:100px;
}

Answer 1

将display:inline-block用于要水平滚动的内容元素，并将white-space:nowrap;添加到容器中。

示例：http://jsfiddle.net/4Lex5wdo/

＆＃13;

#container {
    width:500px;
    background-color: #CCC;
    overflow: auto;
    height: 100px;
    white-space:nowrap;
}
.contents {
    width: 200px;
    height: 60px;
    display:inline-block;
    margin-right:20px;
}

#one {
    background-color:#ABC;
    overflow-y: auto;
    white-space: normal;
}
#two {
    background-color:#333;
}
#three {
    background-color:#888;
}
#four {
    background-color:#E29E1E;
}

＆＃13;

<div id="container">
    <div class="contents" id="one">
text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text  text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text  text text text
    </div>
    <div class="contents" id="two"></div>
    <div class="contents" id="three"></div>
    <div class="contents" id="four"></div>
</div>

＆＃13;

更新

如果您希望容器内的div可以滚动，只需将overflow-y: auto; white-space: normal;添加到您想要的元素中，例如，如果您希望第一个div #one可以滚动，就像您在评论中提到的那样，做到这一点：

#one {
    background-color:#ABC;
    overflow-y: auto;
    white-space: normal;
}

如果你想让它里面的所有div都可以滚动，那就把这个属性赋给它们所有的类，而不是.contents：

.contents {
    width: 200px;
    height: 60px;
    display:inline-block;
    margin-right:20px;
    overflow-y: auto;
    white-space: normal;
}

您可以查看实时示例here on Jsfiddle或运行代码段，它已经更新。

Answer 2

为了让您这样做，您必须摆脱断裂线（<br>），并且必须将overflow-x:scroll;添加到div的css代码中。

您还需要将输入设置为display:inline-block;属性。

如果你想保留分隔线，div的唯一方法就是div的宽度小于其中的组件（在这种情况下：输入字段）。

Fiddle

Div水平溢出（向右）

2 个答案:

更新