我正在为移动设备创建一个侧向滚动的div,但遇到了一个奇怪的问题。如果取消body样式中的字体大小注释,则会在.scroll_item的两侧添加额外的边距。将字体大小设置为0,它就可以正常工作。我试图避免在.scroll_item样式中设置字体大小,而是希望继承页面上之前的内容。
为什么会出现这种情况?是否有其他方法可以纠正它,而不必将字体大小设置为0?
为什么会出现这种情况?是否有其他方法可以纠正它,而不必将字体大小设置为0?
body {
background-color: gray;
padding: 0;
margin: 0;
overflow: hidden;
/*font-size: 0;*/
}
#scroll_cont {
height: auto;
background-color: red;
margin: 0;
padding: 0;
white-space: nowrap;
overflow: auto;
}
.scroll_item {
width: 120px;
height: 120px;
padding: 5px;
margin: 2px;
background-color: blue;
box-sizing: border-box;
white-space: normal;
display: inline-block;
font-size: 20px;
color: white;
}
<html>
<head>
<title>Side Scroll Test</title>
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1, user-scalable=no">
</head>
<body>
<div id="scroll_cont">
<div class="scroll_item">Test1</div>
<div class="scroll_item">Test2</div>
<div class="scroll_item">Test3</div>
<div class="scroll_item">Test4</div>
<div class="scroll_item">Test5</div>
</div>
</body>
</html>
line-height: 1
怎么样? - user6360214