Question

我正在尝试使div上的水平滚动工作。我有一个容器，里面有多个浮动盒子，但如果我做溢出-x：auto，它就不起作用了。

我想要的是.product-container应该水平对齐。现在它由于float：left属性而下降。

html结构是：

    <div class="category-container">
        <div class="product-list">
            <div class="product-container">
            </div>
            <div class="product-container">
            </div>
            <div class="product-container">
            </div>
            <div class="product-container">
            </div>
        </div>
    </div>

css样式如下

<style>
        .category-container{
            width: 100%;
            min-height: 235px;
            border-bottom-style: solid;
            /*border-right-style: solid;*/
            background-color: white;
            border-width: 1px;
            margin-bottom: 10px;
            padding-bottom: 25px;
            position: relative;
            overflow-y: hidden;
        }

        .product-list{
            overflow-x:auto;
            text-align: left;
            margin-left: 10px;
            margin-top: 10px;
            position: absolute;
            left: 190px;
        }

        .product-container{
            width: 230px;
            min-height: 200px;
            display: inline-block;
            border-style: solid;
            border-width: 1px;
            margin-left:10px;
            border-color: grey;
            padding-bottom:10px;
        }
 </style>

可以在这里找到JsFiddle：http://jsfiddle.net/arj196/aY9BJ/

提前感谢您的帮助。

Answer 1

working demo

  .product-list
 {
   width: calc(100% - 50px);
   overflow-x:auto;
   text-align: left;
   margin-left: 10px;
   margin-top: 10px;
   position: absolute;
   left: 190px;
  }

将宽度设置为product-list。如果需要滚动，则会添加滚动条，因为您指定了overflow：auto;

Answer 2

尝试将width=100%提供给.product-list class。它会工作的。滚动条没有足够的宽度，内部div被推下来。 DEMO

提供适当的width。

Answer 3

您应该将.productList的宽度调整为您想要的。

一个工作示例：

      .product-list{
        width:300px;
        overflow-x:auto;
        text-align: left;
        margin-left: 10px;
        margin-top: 10px;
        position: absolute;
        left: 190px;
    }
http://jsfiddle.net/xE6Pe/1/

Answer 4

您需要在overflow-x: auto; l中更改scrol并在width:100%容器中设置product-list

水平溢出滚动不起作用

4 个答案: