如何在容器内制作浮子但不包裹

Question

我有

        <div id="cont">
    <div>a</div>
    <div>b</div>
    <div>c</div>
    <div>d</div>
    </div>

#cont div
{
   float: left
}

会发生什么：

a b 
c d

我想制作它们：

a b c d

这意味着 - 我不介意他们不要包装......而不是滚动！

全部谢谢

Answer 1

尝试为容器div添加固定宽度 如果您不想显示滚动条，那么您也可以使用overflow: hidden。

Answer 2

我认为只有两种方法可以绕过浏览器包装花车的自然行为。

1：为#cont元素指定宽度。

2：改用表格。

Answer 3

使用display：inline属性进行游戏，其中包含一些<div> s。

通常，<div>显示为一个块，这意味着下面将显示以下内容。将其设置为内联使其与文本一起流动。

Answer 4

这个CSS应该这样做：

#cont div
{
    display:inline;
}

#cont
{
    overflow-x:scroll; /*Not sure if you want a scroll or not. Use overflow-x:hidden; if you don't want it.*/
    white-space: nowrap;
}

Answer 5

添加overflow:hidden并将width设置为您的div

#cont { width:500px; overflow:hidden; }
#cont div { width:125px; float:left; }