溢出X軸不工作

Question

我想隱藏父包裝內的內部嵌套元素，以便包裝可以水平滾動顯示隱藏的元素。這是一個JSbin。

.wrapper { 
 
    position: relative; 
 
    width: 150px; 
 
    height: 20px; 
 
    overflow-x: scroll; 
 
    overflow-y: hidden; 
 
    border: thin dotted; 
 
} 
 
span { 
 
    margin: 0 10px; 
 
    display: inline-block; 
 
}

<section class="wrapper"> 
 
    <span>One</span> 
 
    <span>Two</span> 
 
    <span>Three</span> 
 
    <span>Four</span> 
 
</section>

Answer 1

您可以再補充white-space: nowrap到.wrapper

.wrapper { 
 
    width: 150px; 
 
    overflow-x: scroll; 
 
    border: thin dotted; 
 
    white-space: nowrap; 
 
} 
 
span { 
 
    margin: 0 10px; 
 
}

<section class="wrapper"> 
 
    <span>One</span> 
 
    <span>Two</span> 
 
    <span>Three</span> 
 
    <span>Four</span> 
 
</section>

Answer 2

嘗試overflow-x: auto;代替overflow-x: scroll;