我有这个问题。我搜索了该网站，其他人也遇到了类似的问题，但似乎没有一个答案有效。其中包括将行高设置为 0px；并将所有边距/填充设置为 0px。我使用谷歌浏览器的检查元素 Material 来检查边距/填充。我将鼠标悬停在我的“a”元素和“li”元素上，看看它们是否有任何不必要的填充或边距，但它们没有。
奇怪的是，它们在每个链接之间有一点空白，没有被整个文档中的任何元素占据。
现在，由于文本之间没有边框，无法识别，但 Link4 中“a”周围的空间小于 Link1 中文本周围的空间。第一个“li”元素的宽度奇怪地比第 4 个“li”容器宽 4px，并且有一点空白。我想摆脱空白，有什么想法吗？
代码如下:
CSS:
html {
overflow-y: scroll;
}
body {
background-color: #ffdeff;
overflow: hidden;
}
#wrapper {
width: 1000px;
height: 0px;
overflow: hidden;
margin: auto;
background-color: white;
border-left: 1px solid rgb(210, 210, 210);
}
#header {
width: 1000px;
height: 0px;
overflow: hidden;
margin: auto;
}
#header-toolbar {
width: 1000px;
list-style-type: none;
border-radius: 3px;
position: absolute;
}
#nav-position {
position: absolute;
float: left;
padding: 0px;
margin: 0px;
}
.nav-link-container {
background-color: #FF66CC;
display: inline;
padding: 0px;
text-align: center;
}
.nav-link {
padding: 0px;
margin-top: 5px;
margin-bottom: 5px;
text-align: center;
line-height: 0px;
display: table;
display: inline;
margin: 0 auto;
}
HTML 文档:
<body>
<script src="jquery-1.9.1.js"></script>
<script>
</script>
<div id="wrapper">
<div id="header">
<div id="header-toolbar">
<ul id="nav-position">
<li class="nav-link-container">
<a class="nav-link">Link1</a>
</li>
<li class="nav-link-container">
<a class="nav-link">Link2</a>
</li>
<li class="nav-link-container">
<a class="nav-link">Link3</a>
</li>
<li class="nav-link-container">
<a class="nav-link">Link4</a>
</li>
</ul>
</div>
</div>
<div id="main"></div>
<div id="footer"></div>
</div>
</body>
</html>
任何帮助!非常感谢!
最佳答案
<li>的时候有一些空格到新线。所以一种解决方案是将它们全部添加到同一行中，如下所示:http://jsfiddle.net/6tzxj/1/
关于css - 这两个元素 (<li>) 之间的随机额外空间是什么？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16494468/