如何在移动设计中删除Space CSS overflow-x

Question

我尝试通过实现overflow-x来制作一个用于移动设计的幻灯片卡片。

​

​

然而，这在屏幕的右侧留下了一些空间，这真的很烦人。我该如何解决这个问题呢？

我使用了以下样式来去掉屏幕右侧的多余空间：

这是我的html代码

<div class="pet-group">

  <!-- Pet List Widget -->

  <div class="row justify-content-md-center text-center flex-nowrap2">


    <div class="w-25 p-3" data-step="2" data-intro="You also can add your other pet!" data-position='right'
      data-scrollTo='tooltip'>
      <div class="card widget-profile pet-widget-profile ">
        <div class="card-body card-mobile">
          <div class="propet-widget-content ">
            <div class="pet-info-widget ">
              <a href="add-pets.html" class="booking-doc-img ">
                <img src="assets/img/addpet.png " alt="users Image ">
              </a>
              <div class="profile-det-info ">
                <h3><a href="add-pets.html " class="stretched-link ">
                    Add Pet </a> </h3>

              </div>
            </div>
          </div>

        </div>
      </div>
    </div>


    <div class="w-25 p-3" data-step="1"
      data-intro="Hey, its Ricky! You can click here to view or update your pet story." data-position='left'>
      <div class="card widget-profile pet-widget-profile ">
        <div class="card-body card-mobile">
          <div class="propet-widget-content ">
            <a href="profile-pet.html" class="booking-doc-img ">

              <div class="pet-info-widget ">

                <img src="assets/img/pets/cat1.png " alt="users Image ">
            </a>
            <div class="profile-det-info ">
              <h3><a href="profile-pet.html" class="stretched-link ">
                  Ricky </a><span class="badge badge-pill bg-success-light gender">Male</span></h3>


            </div>
          </div>
        </div>

      </div>
    </div>
  </div>

  <div class="w-25 p-3">
    <div class="card widget-profile pet-widget-profile ">
      <div class="card-body card-mobile">
        <div class="propet-widget-content">
          <a href="profile-pet.html" class="booking-doc-img ">

            <div class="pet-info-widget ">

              <img src="assets/img/pets/cat2.png " alt="users Image ">
          </a>
          <div class="profile-det-info ">
            <h3><a href="profile-pet.html" class="stretched-link ">
                Bucky </a><span class="badge badge-pill bg-warning-light gender">Female</span></h3>


          </div>
        </div>
      </div>

    </div>
  </div>
</div>
</div>
</div>

下面是我的css代码

.pet-group {
        margin-top: -70px;
        display: flex !important;
        overflow-x: scroll;
        overflow-y: hidden;
        white-space: nowrap;
        scroll-direction: horizontal;
        -webkit-overflow-scrolling: touch;
        &::-webkit-scrollbar {
            display: none;
        }
    }
    .flex-nowrap2 {
        padding: 15px;
        list-style: none;
        -ms-box-orient: horizontal;
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -moz-flex;
        display: -webkit-flex;
        display: flex;
        -webkit-flex-wrap: nowrap;
        flex-wrap: nowrap;
    }

Answer 1

试一试

.flex-nowrap2 {
    padding-right: 0px;
}

内部移动大小媒体查询。

Answer 2

删除填充

.flex-nowrap2 {
   padding: 0;
}

如果你想要填充文本，只需添加填充到标题标签。