html - 如何在 overflow hidden 时防止 div 换行？

Question

目前我有一行包含多个 div。我试图防止包含的 div 换行。我也不想要滚动条。我试过 overflow hidden 并在行上设置宽度。

编辑:约束规定这必须在没有表、javascript 或外部库的情况下完成。

有没有办法在不借助表格的情况下使用 css 做到这一点？

JSFiddle:http://jsfiddle.net/ozsumdfb/

HTML:

<div class="row">
    <div class="square">
    </div>
    <div class="square">
    </div>
    <div class="square">
    </div>
    <div class="square">
    </div>
    <div class="square">
    </div>
    <div class="square">
    </div>
</div>

CSS:

.square {
    width:100px;
    height:100px;
    float:left;
    margin-left:3px;
    background-color: #6C6;
}
.row {
    width:500px;
    overflow:hidden;
}

Answer 1

代替 float:left 你可以尝试 display:inline-block 然后添加:

.row {white-space:nowrap; }

这是你要找的吗？

fiddle