Question

我有一个div #items，它围绕着一大堆.item。我希望并排显示项目，如果它们超出页面宽度，则显示水平滚动条。

<div id="somediv"></div>

<div id="items">
   <div class="item">
     Item content
   </div>
</div>

<div id="someotherdiv"></div>

我尝试过类似的东西，但它不起作用

#items{
   overflow: auto;
   width:100%;
   height:200px;       /* this is the height of each item*/ 
}
.item{
   float:left;      
}

我认为这是实现这一目标的方法，但我无法让这种方式发挥作用，因此我也愿意接受更正和其他方式。

Answer 1

你是在正确的道路上，但你需要额外的包装才能使它发挥作用......

<div id="scrollable">
<div id="items">
   <div class="item">
     Item content
   </div>
</div>
</div>

然后你的CSS：

    #scrollable {
       overflow: auto;
       width:100%;
       height:200px; 
    }

   #items {
     width: 3000px; /* itemWidth x itemCount */
    }

  .item{
     float:left;      
  }

Answer 2

上一个问题可能有所帮助： CSS div element - how to show horizontal scroll bars only?

因此，请将其更改为：

，而不是当前的css

#items{
    overflow-x: scroll;
    overflow-y: auto;
    width:100%;
    height:200px
}
.item{
    float:left;
}

尝试并在必要时进行调整。

Answer 3

此问题与/how-to-force-horizontal-scrolling-in-an-html-list-using-css有关，其中animuson解释了无法衡量浮动元素。

#items{
overflow: auto;
white-space: nowrap;
width:100%;
height:200px
}

.item{
display: inline-block;
}

同样jsfiddle

Answer 4

我希望你不要为#items提供宽度。就我而言，.item的数量是动态的，并且总结它们并不是我的偏好。

#items{
            overflow: auto;
            white-space:nowrap;
        }

.item {             
            display:inline;
        }

如何显示水平滚动条

4 个答案: