jquery - 内联块导致边距
问题描述
不知何故,我的水平滑块中的框之间有一个我似乎无法修复的边距。我试过摆弄 margin-right:-3, word-spacing: -3;, display:block; 浮动:左;,显示:inline-flex;多很多。我不确定是什么原因造成的,因此我很难寻找解决方案。我以为是内联块。
这里有一个小提琴;但是我似乎无法在我自己的代码中使用水平鼠标效果:https ://jsfiddle.net/urzsj724/1/
这就是我使用鼠标滚轮进行水平滚动的内容:
https://css-tricks.com/examples/HorzScrolling/jquery.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>
解决方案
您可以尝试 display: inline-flex 在包装器上。
https://jsfiddle.net/3qmwLt06/
.wrapper {
overflow: hidden;
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
word-spacing: -10;
display:inline-flex;
}
推荐阅读
- javascript - es6 在 for-of 循环中嵌套并行循环
- yii - 如何在实时服务器上的 yii 中安装 reCaptcha
- python-3.x - 如何从 Scrapy Python 输出中删除 HTML 标签和“\n”
- html - 从博客中的每个 WordPress 博客文章中删除 rel="noopener noreferrer"
- powershell - 使用 Powershell 计划打开和关闭 Putty 终端
- java - 如何选择最佳线程数
- mysql - 如何使用 pymysql 修复“在查询期间丢失与 MySQL 服务器的连接”
- scheduling - 如何定义具有索引的决策变量取决于同一决策变量的其他索引?
- php - php 网站可以连接到在不同服务器上运行的现有 Parse 服务器吗?
- nativescript - SearchBar 组件borderRadius 不起作用