javascript - 无法删除垂直元素之间的空间
问题描述
我正在尝试编写一个无限滚动的怪物(如无尽的马,但没有 jQuery)。但是它在滚动时一直在元素之间显示空格,并且看起来不太好。做 line-height 只会把线条挤成一个奇怪的斑点,什么也做不了。空白对阻止空格没有任何作用。我该怎么办?
window.onscroll = function() {hello()};
function hello() {
var para = document.createElement("pre");
var node = document.createTextNode(` | | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
`);
para.appendChild(node);
var element = document.getElementById("hello");
element.appendChild(para);
element.appendChild(para);
element.appendChild(para);
element.appendChild(para);
element.appendChild(para);
}
<html>
<head>
<title>My first three.js app</title>
<script src="myScript.js"></script>
<style>
body {
margin: 0;
padding: 0;
}
#hello
float: left;
padding: 0;
margin: 0;
display: inline-block;
}
pre {
padding: 0;
margin-bottom: 0;
}
</style>
</head>
<body>
<pre>
_-~~~-_ _-~~~-_
/~ ~\ : , \
' ~ , |: :
{ /~~\ :--~""""\.: :
\ (... : /^\ /^\ ;
~\_____ | | | |:~
/ |__O|_|_O|;
( / O \
\ ( `\_______/)
`\ \ /
) ~-------~'\
/ \
: ||
| | ||
| |.======[]==+'|
(~~~~) | |~)
/ \ | | \
~\ \___/)______/^\__|_/
`\ // | | | |
`\__//' | | | |
~~ | | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
</pre>
<div id="hello">
</div>
</body>
</html>
解决方案
添加得到 pre{margin:0;}
window.onscroll = function() {hello()};
function hello() {
var para = document.createElement("pre");
var node = document.createTextNode(` | | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
`);
para.appendChild(node);
var element = document.getElementById("hello");
element.appendChild(para);
element.appendChild(para);
element.appendChild(para);
element.appendChild(para);
element.appendChild(para);
}
pre{margin:0;}
<html>
<head>
<title>My first three.js app</title>
<script src="myScript.js"></script>
<style>
body {
margin: 0;
padding: 0;
}
#hello
float: left;
padding: 0;
margin: 0;
display: inline-block;
}
pre {
padding: 0;
margin-bottom: 0;
}
</style>
</head>
<body>
<pre>
_-~~~-_ _-~~~-_
/~ ~\ : , \
' ~ , |: :
{ /~~\ :--~""""\.: :
\ (... : /^\ /^\ ;
~\_____ | | | |:~
/ |__O|_|_O|;
( / O \
\ ( `\_______/)
`\ \ /
) ~-------~'\
/ \
: ||
| | ||
| |.======[]==+'|
(~~~~) | |~)
/ \ | | \
~\ \___/)______/^\__|_/
`\ // | | | |
`\__//' | | | |
~~ | | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
</pre>
<div id="hello">
</div>
</body>
</html>
推荐阅读
- algorithm - 有没有办法比较两个频谱图?
- sql - 如何在 SQLALCHEMY 中获取复杂的 Oracle UserDefinedType 作为存储过程的输出
- javascript - PHP - 简单的 ajax 向服务器发送查询
- azure-data-lake - 如何在 U-SQL 中将 byte[] 保存为字符串
- php - Laravel 和内存缓存
- django - Django 中的标签功能
- sql - 我可以将多个字符串传递给 Dynamic SQL 中的一个参数吗?
- visual-studio - Visual Studio 文件打开器不显示所有文件夹
- java - 将 BasicDBList 转换为 Java Arraylist
- javascript - 我不知道为什么会这样......我觉得一切都在告诉我它不应该是 Javascript