html - 水平溢出滚动不起作用

Question

我正在尝试使水平滚动在 div 上起作用。我有一个容器，里面有多个 float 框，但如果我执行 overflow-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;
  }

将宽度设置为产品列表。如果它需要滚动，它会添加滚动条，因为你指定了 overflow:auto;