内嵌块导致的空白[重复]


不知怎的,我的水平滑块中的方框之间有一个边距,我似乎无法解决。我尝试了margin-right:-3, word-spacing: -3;, display:block; float:left;, display:inline-flex;等等。我不知道是什么原因造成的,因此我很难找到解决办法。我以为是inline-block的问题。

在这里摆弄一下;然而我似乎无法让鼠标水平效果在我自己的代码中工作。https:/jsfiddle.neturzsj7241。

这是我用鼠标滚轮进行水平滚动的方法。

https:/css-tricks.comexamplesHorzScrollingjquery.mousewheel.js。

$(function() {
   $(".wrapper").mousewheel(function(event, delta) {
      this.scrollLeft -= (delta * 10);
      event.preventDefault();
   });
});


.container {
  width: 100vw;
  margin:0;
}

.wrapper {
  overflow: hidden;
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap;
  word-spacing: -10;
}
.box {
  display: inline-block;
  height:100vh;
  width: 40vw;
  background-color: white;
  border:1px solid black;
  text-align: center;
  vertical-align: center;
  margin:0;
}

.box img{
    height: 100%;
    object-fit: cover;
    overflow: hidden;
}
  <div class="container">
    <div class="wrapper">
      <div class="box">Item1</div>
      <div class="box">Item2</div>
      <div class="box">Item3</div>
      <div class="box">Item4</div>
    </div>
  </div>

解决方案:

inline-blocks之间总是产生小的边距,试试用这个。

.box {
    font-size: 0
}

在font-size 0之后,设置你的字体大小。

给TA打赏
共{{data.count}}人
人已打赏
解决方案

允许用户在使用angular firebase与google注册时,选择用哪个邮箱注册。

2022-4-19 22:09:20

解决方案

Bixby:想重定向到网页浏览器的网址上的按钮点击

2022-4-19 22:09:22

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索