HTML 水平图像滚动不起作用

Question

我试图让图像在我的网页上水平滚动，但它不起作用。

这是HTML代码:

    <div class="imgf">
    <a href="../assets/img/swe/1.JPG" target="_blank"><img src="../assets/img/swe/1.JPG"></a>
    <a href="../assets/img/swe/2.JPG" target="_blank"><img src="../assets/img/swe/2.JPG"></a>
    <a href="../assets/img/swe/3.JPG" target="_blank"><img src="../assets/img/swe/3.JPG"></a>
    <a href="../assets/img/swe/4.JPG" target="_blank"><img src="../assets/img/swe/4.JPG"></a>
    <a href="../assets/img/swe/5.JPG" target="_blank"><img src="../assets/img/swe/5.JPG"></a>
    <a href="../assets/img/swe/6.JPG" target="_blank"><img src="../assets/img/swe/6.JPG"></a>
    <a href="../assets/img/swe/7.JPG" target="_blank"><img src="../assets/img/swe/7.JPG"></a>
    </div>

这是 CSS:

    .imgf {
    background: #e6e6e6;
    box-shadow: -10px 0px 10px 1px #e6e6e6; 
    width: 40%; 
    margin-left: 42%;
    margin-top: -300px; 
    height: 300px; 
    overflow-x: auto; 
    overflow-y: hidden;
    }

我已经尝试过 whitespace: nowrap 和互联网上的许多其他东西，但它只能水平显示图像而无法滚动。

Answer 1

将子元素水平对齐到可滚动的父元素中

这是在溢出父元素中水平对齐内部元素的基本方法

.imgf{                  /* PARENT */
  overflow-x:auto;      /* Horiz scrollbar if needed */
  font-size:0;          /* remove 4px margin from inner inline-block elements */
  white-space: nowrap;  /* horiz-align inner child */
}
.imgf > * {             /* CHILDREN */
  font-size: 1rem;      /* Reset to 1-relative-em */
  display:inline-block; /* place next to each other */
  vertical-align: top;  /* since using inline-block elements */
  
  /*demo only*/background:#f00;width:400px;height:100px;border-right:1px solid #fff;
}

<div class="imgf">
  <span></span>  
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>