Question

现在，我正在水平滚动。我用一个基本的数字进行了测试，效果很好。然后，我调整了高度和宽度，然后再次正常工作。现在，我试图将图像包含在盒子中以进行新的测试，但是出了点问题，盒子似乎掉下来了，并在容器顶部留下了空间。反正有解决办法吗？

上下文：主要HTML代码：

<div class="menu-wrapper">
  <ul class="menu">
    <li class="item"><img src="https://vignette.wikia.nocookie.net/pswgb/images/2/20/Kneesocks5.JPG/revision/latest/top-crop/width/300/height/300?cb=20110121210606" height="120" width="140"></li><!--
 --><li class="item"><img src="https://66.media.tumblr.com/35136a17400c84a472a0cda0caabf593/81d7a175f1957001-df/s640x960/c117f8d8c4d81d21774d26d6a19e634f12b05163.jpg" height="100" width="100"></li><!--
 --><li class="item">3</li><!--
 --><li class="item">4</li><!--
 --><li class="item">5</li><!--
 --><li class="item">6</li><!--
 --><li class="item">7</li><!--
 --><li class="item">8</li><!--
 --><li class="item">9</li><!--
 --><li class="item">10</li><!--
 --><li class="item">11</li><!--
 --><li class="item">12</li>
  </ul>

CSS：

.menu-wrapper {
  position: relative;
  max-width: 1240px;
  height: 150px; // hide the scroll bar
  margin: 1em auto;
  border: 1px solid black;
  overflow-x: hidden;
  overflow-y: hidden;
}

.menu {
  height: 200px; // hide the scroll bar
  background: #f3f3f3;
  box-sizing: border-box;

  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;

  .item {
    display: inline-block;
    width: 200px;
    height: 100%;
    outline: 1px dotted gray;
    padding: 1em;
    box-sizing: border-box;
  }
}

完整项目：https://codepen.io/Aidan_Monner/pen/PoZzBXK

这是一张图片（是的，我用过Kneesocks来尝试）： The Issue I have!

Answer 1

我认为问题在于您的CSS。请尝试此CSS。为.item类设置溢出x和溢出y属性。

.menu-wrapper {
    position: relative;
    max-width: 1240px;
    height: 300px;
    margin: 1em auto;
    border: 1px solid black;
    overflow-x: hidden;
    overflow-y: hidden;
}

.menu {
    height: 200px; 
    background: #f3f3f3;
    box-sizing: border-box;

    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

.item {
    display: inline-block;
    width: 200px;
    height: 100%;
    outline: 1px dotted gray;
    padding: 1em;
    box-sizing: border-box;
    overflow-x: auto;
    overflow-y: hidden;
}

Answer 2

也将overflow-x: hidden;和overflow-y: hidden;添加到您的.item类中，并与.menu一起添加。

.menu-wrapper {
    position: relative;
    max-width: 1240px;
    height: 300px;
    margin: 1em auto;
    border: 1px solid black;
    overflow-x: hidden;
    overflow-y: hidden;
}

.menu {
    height: 200px; 
    background: #f3f3f3;
    box-sizing: border-box;

    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

.item {
    display: inline-block;
    width: 200px;
    height: 100%;
    outline: 1px dotted gray;
    padding: 1em;
    box-sizing: border-box;
    overflow-x: auto;
    overflow-y: hidden;
}

<div class="menu-wrapper">
  <ul class="menu">
    <li class="item"><img src="https://vignette.wikia.nocookie.net/pswgb/images/2/20/Kneesocks5.JPG/revision/latest/top-crop/width/300/height/300?cb=20110121210606" height="120" width="140"></li><!--
 --><li class="item"><img src="https://66.media.tumblr.com/35136a17400c84a472a0cda0caabf593/81d7a175f1957001-df/s640x960/c117f8d8c4d81d21774d26d6a19e634f12b05163.jpg" height="100" width="100"></li><!--
 --><li class="item">3</li><!--
 --><li class="item">4</li><!--
 --><li class="item">5</li><!--
 --><li class="item">6</li><!--
 --><li class="item">7</li><!--
 --><li class="item">8</li><!--
 --><li class="item">9</li><!--
 --><li class="item">10</li><!--
 --><li class="item">11</li><!--
 --><li class="item">12</li>
  </ul>

希望对您有帮助！
问候，
欧姆乔杜里（Om Chaudhary）

我的水平滚动条的框未正确对齐（向下倾斜）？

2 个答案: