Question

我有以下代码：

HTML

<div id="parent">
    <div class="child">2001</div>
    <div class="child">2O02</div>
    <div class="child">2003</div>
    <div class="child">2004</div>
    <div class="child">2005</div>
</div>

CSS

#parent{
width:100%;
overflow:auto;
}

.Child{
float:left;
width:20px;
}

儿童内容总是满溢，这很好。但我希望能够在父div中水平滚动，以查看最后一个子div。

以下是我的结果截图：

Screenshot

如何才能使水平滚动？

Answer 1

如果您希望所有孩子都在一行中，您必须添加第二个＆＃34; parent＆＃34; DIV并设置它的宽度（单行所有孩子的组合宽度）：

HTML：

<div id="parent">
    <div id="parent2">
        <div class="child">2001</div>
        <div class="child">2002</div>
        <div class="child">2003</div>
        <div class="child">2004</div>
        <div class="child">2005</div>
    </div>
</div>

CSS：

#parent{
    width:100%;
    overflow:auto;
}


#parent2{
    width:1000px;
}

.child{
    float:left;
    width:200px;
}

包含浮动子div的父div中的水平滚动

1 个答案: