CSS不换行浮动div

Question

我需要创建一个包含可变数量的（浮动？）div的单行：容器尺寸固定，如果需要，应该添加水平滚动条，而不是换行。

我尝试了以下方法，但它无法生效：它会换行。

div#sub {
    background-image:url("../gfx/CorniceSotto.png");
    width:760px;
    height:190px;
}
div#sub > div#ranking {
    position:relative;
    top:42px;
    left:7px;
    width:722px;
    height:125px;
    overflow-x:auto;
    overflow-y:hidden;
}
div#sub > div#ranking > div.player {
    float:left;
    width:67px;
    height:120px;
    margin-left:5px;
    background-color:#f3e1bb;
}

我已经尝试了一些方法（inline，table-cell等）但都失败了。

这个能做到吗？如果可以，怎么做？

- o0'.

---

你能否在jsfiddle.net上设置一个fiddle来展示你的例子？ - Evan Davis

@Mathletics：在这里！http://jsfiddle.net/HZzrk/ - o0'.

嗨。在CSS中，'>'符号代表什么意思？ - bodacydo

@bodacydo（以及随后到来的任何人）直接子级选择器- http://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize--net-16048 - BillyNair

Answer 1

使用 display: inline-block 替代 float 并给容器添加 white-space: nowrap。

div#sub > div#ranking {
    position:relative;
    top:42px;
    left:7px;
    width:722px;
    height:125px;
    overflow-x:auto;
    overflow-y:hidden;
    white-space: nowrap;
}
div#sub > div#ranking > div.player {
    display: inline-block;
    width:67px;
    height:120px;
    margin-left:5px;
    background-color:#f3e1bb;
}

以下是一个示例: http://jsfiddle.net/D5hUu/3/

- DanielB

---

如果不像我的答案那样将width更改为min-width，则如果元素太多，仍会出现元素“换行”。请参见您的fiddle并添加一些额外的元素：http://jsfiddle.net/D5hUu/2/ - ScottS

实际上，这也是我的答案中存在的问题。min-width并不能完全解决它。 - ScottS

@Scott：我的代码有错误，已经更新了，抱歉。答案中的代码是正确的。 - DanielB

@John Kurlak：在 div#sub > div#ranking > div.player 中添加 vertical-align: bottom;。 - DanielB

当将 display 设置为 inline-block 时要小心。如果存在空格，它会在项目之间造成不必要的间隙。 - DylanYi

Answer 2

内联样式不起作用，表格单元格应该可以解决 - 参见我在类似问题的答案中制作的这个jsFiddle：

http://jsfiddle.net/DxZbV/1/

在<=ie7中不起作用...

- ptriek

Answer 3

抱歉，我误读了问题。已删除先前的答案。

---

在您的容器上使用white-space: nowrap，然后在元素上使用display: inline-block

示例链接：http://jsfiddle.net/HZzrk/1/

- Evan Davis

---

不，scroll 表示“始终显示滚动条”，而 auto 表示“仅在需要时显示滚动条”。 - o0'.

Answer 4

编辑：将DanielB和我原始的答案结合起来。你需要在sub和ranking中都使用min-width而不是width，并将元素设置为inline-block，同时容器要设为white-space: nowrap。参见：http://jsfiddle.net/5wRXw/3/

编辑2：根据你的需要，最好将ranking元素上的overflow属性全部清除。请参见：http://jsfiddle.net/5wRXw/4/

#sub {
    backgrond-color: yellow;
    min-width:760px;
    height:190px;
}
#ranking {
    position:relative;
    top:42px;
    left:7px;
    min-width:722px;
    height:125px;
    overflow-x:auto; /* you may be able to eliminate this see fiddle above */
    overflow-y:hidden; /* and eliminate this */
    white-space: nowrap; /* like DanielB */
}
#ranking > .player {
    display: inline-block; /* like DanielB */
    width:67px;
    height:120px;
    margin-left:5px;
    background-color:#f3e1bb;
}

- ScottS

---

嗯，引用OP的话：“容器的尺寸是固定的”，所以min-width不是一个解决方案。 - DanielB