Question

我想这样做，如果容器内的内联块超过容器的宽度，它们会使它伸展而不是下降。

我对我的意思做了一个代码：http://codepen.io/anon/pen/pJQWbR

<div class="container">
  <div class="content"></div>
  <div class="content"></div>
  <div class="content"></div>
  <div class="content"></div>
  <div class="content"></div>
</div>

CSS

.container{
  overflow: scroll;
}

.content{
  height: 100px;
  margin: 5px;
  background: blue;
  display: inline-block;
  width: 25%;
}

尝试将蓝框全部放在一行上。

Answer 1

添加

white-space: nowrap

到container

所以容器样式变成：

.container{
  overflow-x: scroll;
  white-space: nowrap;
}

white-space：nowrap表示空格的序列将折叠为单个空格。文本永远不会换行到下一行。该文本在同一行继续，直到＆lt; br＆gt;遇到标签

请参阅链接：“http://codepen.io/anon/pen/xGQXRz”

Answer 2

试试这个。只需更改.content类的宽度。

＆＃13;

.container{
  overflow: scroll;
}

.content{
  height: 100px;
  margin: 5px;
  background: blue;
  display: inline-block;
  width: 17%;
}

＆＃13;

<div class="container">
  <div class="content"></div>
  <div class="content"></div>
  <div class="content"></div>
  <div class="content"></div>
  <div class="content"></div>
</div>

＆＃13;

使内嵌块水平拉伸容器

2 个答案: