Question

那么，如何使这些蓝色方块水平溢出，以便出现水平滚动条（对于页面而不是div）并使其成为flexibale，这样如果添加新的方块，它可以扩展..并且任何人都可以使用CSS，Javascript或者Jquery没问题！并感谢提前

＆＃13;

    <head>
    <style>
    .test {
    background: blue;
    width: 372.1478174125px;
    height: 230px;
    margin: 5px;
    float: left;
    display: inline-block;
    
    }
    .horizontal {
    background: gray;
    height: 640px;
    margin: 0px;
    padding: 0px;
    white-space: nowrap;
    }
    </style>
    </head>
    <body>
    <div class= "horizontal">
    <div class = "test"> hello </div><div class = "test"> hello </div>
    <div class = "test"> hello </div>
    <div class = "test"> hello </div>
    <div class = "test"> hello </div>
    <div class = "test"> hello </div>
    <div class = "test"> hello </div>
        <div class = "test"> hello </div>
        <div class = "test"> hello </div>
        <div class = "test"> hello </div>
    </div>
    
    </body>

＆＃13;

Answer 1

您需要删除项目上的float: left;，因为容器上的white-space: nowrap;对浮动项本身没有任何影响。

不要忘记将overflow-x: auto;添加到容器中。

.horizontal {
  background: gray;
  height: 640px;
  margin: 0px;
  padding: 0px;
  white-space: nowrap;
  overflow-x: auto; /* new */
}

.test {
  background: blue;
  width: 372.1478174125px;
  height: 230px;
  margin: 5px;
  /* float: left; */
  display: inline-block;
}

<div class="horizontal">
  <div class="test"> hello </div>
  <div class="test"> hello </div>
  <div class="test"> hello </div>
  <div class="test"> hello </div>
  <div class="test"> hello </div>
  <div class="test"> hello </div>
  <div class="test"> hello </div>
  <div class="test"> hello </div>
  <div class="test"> hello </div>
  <div class="test"> hello </div>
</div>

如何以横向方式溢出元素？

1 个答案: