我有这个问题.我搜索了网站,其他人也有类似的问题,但没有一个答案似乎有效.包括将行高设置为0px;并将所有边距/填充设置为0px.我使用Google Chrome的Inspect Element材料来检查边距/填充.我在我的“a”元素和“li”元素上盘旋,看看它们是否有任何不必要的填充或边距,但它们没有.
奇怪的是,他们在每个链接之间有一个小空格,没有被整个文档中的任何元素占据.
现在,由于文本之间没有边框,因此无法识别,但Link4中“a”周围的空间小于Link1中文本周围的空间.第一个“li”元素的宽度比第四个“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>
一切都有帮助！非常感谢你！
