Html CSS 非包装浮动 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8447553/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS non-wrapping floating divs
提问by o0'.
I need to create a single line containing a variable amount of (floating?) divs: the container dimension is fixed, and it is supposed to add an horizontal scrollbar when needed, never wrapping.
我需要创建一行包含可变数量的（浮动？）div：容器尺寸是固定的，并且应该在需要时添加一个水平滚动条，从不换行。
I tried the following, but it doesn't work: it wraps instead.
我尝试了以下方法，但不起作用：它改为包装。
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;
}
I've tried a few things (inline,table-cell,etc.) but they all failed.
我尝试了一些东西（内联、表格单元等），但它们都失败了。
Can this be done? If so, how?
这能做到吗？如果是这样，如何？
回答by DanielB
Use display: inline-blockinstead of floatand give the container white-space: nowrap.
使用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;
}
Here an example: http://jsfiddle.net/D5hUu/3/
这里有一个例子：http: //jsfiddle.net/D5hUu/3/
回答by ptriek
inline won't work, table-cell should work - see this jsFiddle I made in answer to a similar question:
内联不起作用，表格单元格应该工作 - 请参阅我在回答类似问题时制作的这个 jsFiddle：
won't work in <=ie7 though...
虽然在 <=ie7 中不起作用...
回答by Mathletics
whoops, I misread the question. Previous answer removed.
哎呀，我误读了这个问题。先前的答案已删除。
on your container, white-space: nowrapand then on the elements display: inline-block
在你的容器上，white-space: nowrap然后在元素上display: inline-block
Fiddle here: http://jsfiddle.net/HZzrk/1/
在这里小提琴：http: //jsfiddle.net/HZzrk/1/
回答by ScottS
Edited: Combined DanielB's and my original answer. You need to put min-widthinstead of widthfor both suband rankingand have the elements set to inline-blockwith container having white-space: nowrap. See: http://jsfiddle.net/5wRXw/3/
编辑：结合 DanielB 和我的原始答案。您需要放置min-width而不是width同时放置sub和ranking并将元素设置为inline-block容器具有white-space: nowrap. 见：http: //jsfiddle.net/5wRXw/3/
Edit 2: For your purposes, it might be better to eliminate the overflowproperties all together on the rankingelement. See http://jsfiddle.net/5wRXw/4/
编辑 2：出于您的目的，最好overflow将ranking元素上的所有属性一起消除。见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;
}
