Question

我在<ul>内有动态<div>，我希望<div>调整为<ul>的大小。没问题。但是，当我使用<div>将所有内容封装在容器overflow: auto上时，第一个<div>将不会调整为<ul>的大小，而是调整为容器的大小，因此<ul>和<li>会突然移动到<div>的右边框，并且不会滚动到HORIZONTALLY。

结构很像：

<div id="mainContainer">
    <div id="iWantToBeHuge">
        <ul>
            <li> Stuff </li>
         </ul>
    </div>
</div>

CSS：

#mainContainer {

    width: 200px;
    height: 500px;

    float: left;

    overflow: auto;

}

#iWantToBeHuge {

    width: auto;
    height: 95%;

    /*    already tried these    */
    /*    position:absolute;     */
    /*    position:relatve;      */
    /*    float: left;           */

}

http://jsfiddle.net/7EYTh/

另外 - 添加静态大小不是一个选项，内容可以是30px到3000px之间的任何内容。

Answer 1

您不应该使用height: 95%;，这意味着当您使用相对高度时，元素使用父级来确定大小。所以你告诉#iWantToBeHuge使用95％的#mainContainer身高。

如果您想查看滚动条，请尝试将#iWantToBeHuge高度更改为比#mainContainer更大的尺寸，即：600px。或者只是删除高度样式，以便它可以适应ul。

编辑：尝试将此CSS用于水平滚动：

#mainContainer{
    width: 200px;
    height: 600px;
    overflow: auto;
}

#iWantToBeHuge ul li{
    white-space: nowrap;
}

Answer 2

Jesus Rugama＆＃39; answer解释了为什么没有垂直溢出。由于您正在寻找水平溢出，

目前没有任何东西水平溢出您的容器。如果你想要滚动条，你应该创建溢出，例如

#iWantToBeHuge {
  width: auto;
  height: 95%;
  white-space:nowrap;
}

Demo

容器中的div不会滚动

2 个答案: