为什么它没有滚动x轴与溢出-x滚动。相反它滚动到y轴

Question

不使用overflow-x滚动滚动x轴。而是滚动到y轴。

此代码段：

        .col {
        overflow-x: scroll;
        background-color: #3e5771;
        width: 90%;
        height: 200px;
        margin: auto;
        border: 2px solid #1abc9c;
        border-radius: 15px;
    }
    
    .box img {
        display: inline-block;
        margin: 8px;
    }

    <div class="col">
    <div class="box">
    <a href="#"><img src="http://lorempixel.com/output/animals-h-g-200-400-10.jpg"></a>
<a href="#"><img src="http://lorempixel.com/output/animals-h-g-200-400-10.jpg"></a>
<a href="#"><img src="http://lorempixel.com/output/animals-h-g-200-400-10.jpg"></a>
<a href="#"><img src="http://lorempixel.com/output/animals-h-g-200-400-10.jpg"></a>
<a href="#"><img src="http://lorempixel.com/output/animals-h-g-200-400-10.jpg"></a>
<a href="#"><img src="http://lorempixel.com/output/animals-h-g-200-400-10.jpg"></a>
    </div>
    </div>

Answer 1

根据我的理解，您希望进行水平滚动并防止垂直滚动。

您确实设置了overflow-x : auto，但您忘了设置overflow-y : hidden。此外，要强制将内容放在一行，一种简单的方法是使用display:flex：

＆＃13;

＆＃13;

.col {
  overflow-x: scroll;
  background-color: #3e5771;
  width: 90%;
  height: 200px;
  margin: auto;
  border: 2px solid #1abc9c;
  border-radius: 15px;
  
  overflow-y: hidden; /* add this */
}

.box{
 display : flex; /* add this */
}

.box img {
   /* display: inline-block; Remove this */
  margin: 8px;
}

＆＃13;

<div class="col">
  <div class="box">
    <a href="#"><img src="http://lorempixel.com/200/150/"></a>
    <a href="#"><img src="http://lorempixel.com/200/150/"></a>
    <a href="#"><img src="http://lorempixel.com/200/150/"></a>
    <a href="#"><img src="http://lorempixel.com/200/150/"></a>
    <a href="#"><img src="http://lorempixel.com/200/150/"></a>
    <a href="#"><img src="http://lorempixel.com/200/150/"></a>
    <a href="#"><img src="http://lorempixel.com/200/150/"></a>
    <a href="#"><img src="http://lorempixel.com/200/150/"></a>
    <a href="#"><img src="http://lorempixel.com/200/150/"></a>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;