css - 强制浮动：左 div 不转到下一行

Question

假设我有 20 个相同的 div，它们具有 float:left 属性和一些宽度。我希望它们排成一行，如果它们不适合屏幕，只是为了使页面水平滚动。

score 21 · Accepted Answer

这基本上就是花车的工作原理。如果您想要描述的行为，您可以做其他事情，例如white-space: nowrap;在容器上而display: inline-block;不是浮动。

.container {
    white-space: nowrap;
}
.line {
    display: inline-block;
    width: 200px;
    vertical-align: top;
    white-space: normal;
}

不过需要注意的一点是：使用这种方法，div 之间的换行符/空格/制表符会在渲染中导致它们之间出现空格。

score 2 · Accepted Answer

在 div 上使用display: inline-block而不是float: left，并将属性添加white-space: nowrap到其父容器。

score 0 · Accepted Answer

将高度设置为父div，并添加属性overflow:scroll

<div class="parentDiv"> 
    <div class="line">ddd</div>
    <div class="line">ddd</div>
    <div class="line">ddd</div>
     ...
</div>

和CSS：

.parentDiv{height:50px; overflow: scroll;}

score 0 · Accepted Answer

0

在父元素上设置硬宽度：

 body{ width:8000px; }

于 2012-10-16T16:40:55.130 回答

4 回答 4