如何使`overflow-x`工作而不是`overflow-y`？

Question

我有一个父级，它有多个子级，当父级宽度溢出时，我想显示水平滚动条。

我不想使用'display：inline-block'属性，因为它们之间会产生空格。

这是我的尝试：

.parent{
  width:250px;
  overflow-x:auto;
  height:100px;
  white-space: nowrap; 
}

.children{
  width:250px;
  height:100px;
  float:left;
  border:1px solid red;
  box-sizing:border-box;
}

<div class="parent">
  <div class="children">children 1</div>
  <div class="children">children 2</div>
  <div class="children">children 3</div>
  <div class="children">children 4</div>
</div>

Answer 1

使用flexbox

＆＃13;

＆＃13;

.parent {
  margin: 1em auto;
  overflow-x: auto;
  width: 250px;
  white-space: nowrap;
  display: flex;
  border: 1px solid blue;
}
.children {
  flex: 0 0 250px;
  height: 100px;
  border: 1px solid red;
  box-sizing: border-box;
}

＆＃13;

<div class="parent">
  <div class="children">children 1</div>
  <div class="children">children 2</div>
  <div class="children">children 3</div>
  <div class="children">children 4</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

删除float属性＆amp;添加display:inline-block

.children{
  width:250px;
  height:100px;
  /*float:left;*/
  display:inline-block;
  border:1px solid red;
  box-sizing:border-box;
}

Answer 3

使用table-cell

＆＃13;

＆＃13;

.parent {
  margin: 1em auto;
  overflow-x: auto;
  width: 250px;
  border: 1px solid blue;
}
.children {
  height: 100px;
  border: 1px solid red;
  box-sizing: border-box;
  display: table-cell;
}
.children::before {
  content:'';
  display:block;
  width: 250px;
}

＆＃13;

<div class="parent">
  <div class="children">children 1</div>
  <div class="children">children 2</div>
  <div class="children">children 3</div>
  <div class="children">children 4</div>
</div>

＆＃13;

＆＃13;

＆＃13;