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

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

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;