HTML+CSS 图片向左滑动

image.png

1、结构

 <!-- 每日必看 start -->
    <div class="sa_content">
      <section class="part-item">
        <div class="title">
          <b>每日必看</b>
        </div>
          <div class="pdd-box">
            <ul>
              <li class="item" v-for="item in list[index].lists" :key="item.i" @click="go(item.id)">
                <a href="javascript:;">
                  <div class="img-box">
                    <img :src="item.img" alt />
                  </div>
                  <div class="desc">{{item.desc}}</div>
                  <div class="price">
                    <span class="pri">{{item.pri}}</span>
                    <span class="line">{{item.line}}</span>
                  </div>
                </a>
              </li>
            </ul>
          </div>
        </div>
      </section>
    </div>
    <!-- 每日必看 end -->

2、样式

  .pdd-box {
        width: 100%;
        padding: 20px 0;
        box-sizing: border-box;
        ul {
          overflow-x: auto;
          overflow-y: hidden;
          padding-left: 15px;
          display: flex;

          .item {
            margin-right: 15px;
            width: 114px;

            a {
              color: #000;
              .img-box {
                img {
                  width: 113px;
                  height: 95px;
                }
              }
              .desc {
                font-size: 10px;
                margin-top: 5px;
              }
              .price {
                text-align: center;
                .pri {
                  color: #ed008c;
                  font-size: 14px;
                }
              }
            }
          }
        }
      }

主要是下面的属性可以达到向左滑动图片

display: flex;
overflow-x: auto;
overflow-y: hidden;