当添加更多浮动div时,使div仅水平扩展

Question

我试图创建一个包含其他浮动div的div来调整其宽度,这样添加更多浮动div(动态使用jQuery)只会扩展div的宽度,不允许浮动div创建一个新行.因此,我想解决这个问题,使得每个具有类的div grid-row仅在宽度上扩展,因此我将能够使用overflow: scrollfor griddiv 进行滚动.我已经搜索了很多答案,似乎这是一个着名的问题.但是,没有答案解决了我的问题.

我目前正在这样做:

    <div id="grid_container">
        <div id="grid">
            <div class="grid_row">
                <div class="module" id="experience">
                    Experience
                </div>
                <div class="header">
                    Google
                </div>
                <div class="header">
                    Microsoft
                </div>
            </div>
            <div class="grid_row">
            </div>
        </div>
    </div>

CSS:

body {

}

#grid_container { 
    margin: 50px auto;
    width: 500px;
    height: 500px;
    padding: 10px;
    border: black solid 1px;
}

#grid {
    overflow:scroll;
    height: 100%;
}
.grid_row { 
    clear: both;
    height: 50px;
}
.module, .header{
    padding: 10px;
    float: left;
    border: gray solid 1px;
}

Answer 1

您可以通过使行容器浮动并使样式为"white-space:nowrap"来实现此目的.

http://jsfiddle.net/UeNZr/3/

编辑 另一种方法是使每个项目内联显示并使每个网格元素浮动.http://jsfiddle.net/UeNZr/5/.

Answer 2

如果您正在制作列表,请考虑使用更多语义ul.

演示

HTML:

  <ul class="grid">
    <li>
      <ul>
        <li>One Mississippi</li>
        <li>Two Mississippi</li>
        <li>Three Mississippi</li>
        <li>Four Mississippi</li>
        <li>Five Mississippi</li>
        <li>Six Mississippi</li>
      </ul>
    </li>
    <li>
      <ul>
         ...
      </ul>
    </li>
    <li>
      <ul>
         ...
      </ul>
    </li>
  </ul>

CSS:

.grid ul{
    margin:10px 0;
    height:42px;
    width:100%;
    overflow-x:scroll;
    background:white;
    white-space:nowrap;
}

.grid li li {
    list-style-type:none;
    display:inline-block;
    padding:10px;
    border:1px solid gray;
    height:20px;
}