如何让`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的

.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; 
 
}

<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 2

删除float财产&添加display:inline-block

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

Answer 3

使用表单元格

.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; 
 
}

<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>