内嵌块导致的空白[重复]
这个问题在这里已经有了答案:如何去除inlinin-block元素之间的空格？ (40个回答)
封闭 4个月前.
不知怎的，我的水平滑块中的方框之间有一个边距，我似乎无法解决。我尝试了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-flex。
https:/jsfiddle.net3qmwLt06
.wrapper {
overflow: hidden;
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
word-spacing: -10;
display:inline-flex;
}
页:
[1]