HTML / CSS嵌套div用向左浮动滚动条

Question

我想用一个固定高度和宽度的div做一个简单的效果，它包含一组可以从左向右滚动的div。

这是代码，但出于某种原因，孩子们不想浮动

.a       {width:200px; height:200px; overflow-x:scroll; border:3px solid red;}
.a > div​ {width:170px; height:170px; float:left; background:#eee; border:1px dotted #ddd;}

<div class="a">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
</div>

http://jsfiddle.net/SZzwP/

Answer 1

您不必（也不应该）更改HTML。

只需使用white-space:nowrap即可避免违行

.a{
    width:200px;
    overflow-x:scroll;
    border:3px solid red;
    white-space:nowrap;
}
.a > div {
    width:170px; height:170px;
    display:inline-block;
    background:#eee;
    border:1px dotted #ddd;
}

请在此处查看：http://jsfiddle.net/5Rz98/3/

Answer 2

您为每个孩子提供了170px的宽度，但父级只有200px。请将孩子的宽度更改为小于50px：

.a       {width:200px; height:200px; overflow-x:auto; border:3px solid red;}
.a > div {width:45px; height:170px; float:left; background:#eee; border:1px dotted #ddd;}

另外，请overflow-x: auto，以便最初不显示水平滚动。

如果是滑块，则需要使用其他标记：

<div class="a">
    <div>
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
    </div>
</div>​

CSS：

.a       {width:200px; height:200px; overflow-x:auto; border:3px solid red;}
.a > div {width:700px; height:170px;}
.a > div > div {width:170px; height:170px; float:left; background:#eee; border:1px dotted #ddd;}

小提琴：http://jsfiddle.net/fPeUg/

Answer 3

基本上，您希望容器内部有div，其宽度可以并排容纳两个div。如果不执行此操作，您将尝试浮动2 div，其宽度超过200px（容器）。

---

HTML

<div class="a">
    <div class="inner">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
    </div>
</div>​

CSS

.a{
    width:200px; 
    height:200px; 
    overflow-x:scroll; 
    border:3px solid red;
}

.inner{
    width:344px;
}

.inner div{
    width:170px; 
    height:170px; 
    float:left; 
    background:#eee; 
    border:1px dotted #ddd;
}​

http://jsfiddle.net/charlescarver/a4T8f/1/

Answer 4

你需要在.a中有另一个nest div，其宽度足够让所有内部div都可以浮动，如下所示：

<div class="a">
    <div class="b">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    </div>
</div>
​.a       {width:200px; height:200px; overflow-x:scroll; border:3px solid red;}
.b {width:800px}
.b > div {width:170px; height:170px; float:left; background:#eee; border:1px dotted #ddd;}