Question

我生成了以下代码：

<html>
<head>
<style>
    div.week {
        overflow-x: scroll;
        height: 70%;
    }

    div.day{
        float: left;
        width: 300px;
        border: thin black solid; 
        background-color: cyan;
        margin-right: 2em;
        vertical-align: top;
    }
</style>
</head>
<body>


<div class="week">

    <div class="day">
     2015-06-28         
    </div>

    <div class="day">
     2015-06-29         
    </div>

    <div class="day">
     2015-06-30         
    </div>

    <div class="day">
     2015-07-01         
    </div>

    <div class="day">
     2015-07-02         
    </div>

    <div class="day">
     2015-07-03         
    </div>

    <div class="day">
     2015-07-04         
    </div>

</div>


</body>
</html>

问题在于它包装了day div，所以在我当前的分辨率下，我有一行4行和一行3个div：

+=====================================+
|                                     |
|  +----+   +----+   +----+   +----+  |
|  |    |   |    |   |    |   |    |  |
|  |    |   |    |   |    |   |    |  |
|  +----+   +----+   +----+   +----+  |
|                                     |
|  +----+   +----+   +----+           |
|  |    |   |    |   |    |           |
|  |    |   |    |   |    |           |
|  +----+   +----+   +----+           |
|                                     |
+=====================================+

但是，我想要的是我的所有day div都在一行上，无论我的浏览器大小如何，下面都会显示一个滚动条：

+=====================================+
|                                     |
|  +----+   +----+   +----+   +----+  |
|  |    |   |    |   |    |   |    |  |
|  |    |   |    |   |    |   |    |  |
|  +----+   +----+   +----+   +----+  |
|<[  ]:::::::::::::::::::::::::::::::>|
|                                     |
|                                     |
|                                     |
|                                     |
|                                     |
+=====================================+

我该如何做到这一点？

Answer 1

设置overflow: auto（以便滚动条在包装元素上显示，如果需要）和white-space: nowrap（因此子元素不会转到下一行）。

section {
  width: 300px;
  height: 100px;
  background: red;
  overflow-x: auto;
  white-space: nowrap;
}
div {
  width: 75px;
  height: 100px;
  background: blue;
  display: inline-block;
}

<section>
  <div>1.</div>
  <div>2.</div>
  <div>3.</div>
  <div>4.</div>
  <div>5.</div>
  <div>6.</div>
  <div>7.</div>
</section>

Answer 2

这样做，在你的日元素周围添加一个包装，给它100％的宽度和白色空间：nowrap。然后给你的day元素一个显示：inline-block。

div.week {
     overflow-x: scroll;
     height: 70%;
   }
   .wrapper {
     width: 100%;
     white-space: nowrap;
   }
   div.day {
     display: inline-block;
     width: 300px;;
     border: thin black solid;
     background-color: cyan;
     margin-right: 2em;
     vertical-align: top;
   }

<div class="week">
  <div class="wrapper">
    <div class="day">
      2015-06-28
    </div>

    <div class="day">
      2015-06-29
    </div>

    <div class="day">
      2015-06-30
    </div>

    <div class="day">
      2015-07-01
    </div>

    <div class="day">
      2015-07-02
    </div>

    <div class="day">
      2015-07-03
    </div>

    <div class="day">
      2015-07-04
    </div>
  </div>

</div>

如何在没有包装的情况下让div水平展开？

2 个答案: