Question

我的结构类似于这个小提琴http://jsfiddle.net/qqqh1agy/1/

HTML：

<div class="outer">
  <div class="inner"></div>
  <div class="inner"></div>
  <div class="inner"></div>
</div>

CSS：

.outer{
    width: 100px;
    height:20px;
    overflow: auto;
}
.inner{
    background:red;
    width:50px;
    float:left;
    height:20px
}

我希望内部div在一条带有水平滚动条的行上。这可能吗？

任何想法都非常感激

C

Answer 1

将white-space:nowrap;添加到outer div，然后将float:left替换为display:inline-block div上的inner

这会强制内部元素显示在一行上，同时阻止它们包裹到下一行。

Demo Fiddle

.outer {
    width: 100px;
    height:20px;
    overflow-x: scroll;
    white-space:nowrap; /* <-- force items to display on the same line */ 
}
.inner {
    background:red;
    width:50px;
    height:20px;
    display:inline-block; /* <-- display 'in a row' */ 
}

也就是说，要正确显示滚动条和内容，您可能需要将CSS更改为：

Demo Fiddle

.outer {
    width: 100px;
    overflow-x: auto; /* <-- show horizontal scrollbar */
    overflow-y:hidden; /* <-- hide vertical scrollbar */
    white-space:nowrap;
}
.inner {
    background:red;
    width:50px;
    height:20px;
    display:inline-block;
}

Answer 2

是的，您可以使用inline-block与white-space: nowrap结合使用。它会将所有元素放在一行而不包装它们。

小提琴：http://jsfiddle.net/1zmeztt3/1/

.outer{
    width: 100px;
    height:40px;
    overflow-x: auto;
    white-space: nowrap;
}

.inner{
    background:red;
    width:50px;    
    height:20px;
    display: inline-block;
}

您还应该使用overflow-x来防止垂直滚动并增加行的高度，以确保滚动条适合其内部。

Answer 3

你遇到的问题是三个浮动div根据父元素的宽度计算它们的位置。一个合理的解决方案是嵌套2个外部div，内部div对于所有3个浮动div都足够宽，而外部div具有受限制的宽度和滚动。

HTML：

<div class="outer">
    <div class="nest">
        <div class="inner"></div>
        <div class="inner blue"></div>
        <div class="inner"></div>
    </div>
</div>

CSS：

.outer{
    width: 100px;
    height: 30px;
    overflow-x: scroll;
    overflow-y: hidden;
}
.nest{
    width: 150px
}
.inner{
    background:red;
    width:50px;
    float:left;
    height:20px
}
.blue{
    background: blue;
}

jsfiddle

可能会出现问题，因为内部div的宽度取决于你有多少浮动div以及它们有多宽。因此，如果这些因素可能是任意的，那么这种解决方案可能并不是最好的。

编辑：我会使用SW4的解决方案，但它可能不适用于较旧的IE浏览器。

Answer 4

您可以尝试使用：

明确：无;

这是一个链接： http://www.w3schools.com/cssref/pr_class_clear.asp

编辑原始帖子后不再有效回复。

强制嵌套div /跨度到一行

4 个答案:

Demo Fiddle

Demo Fiddle