我有这个我放在一起的简单导航，由于某种原因，我在第一个链接开始之前得到了大约 40 像素的左边距。我在 div 上没有左边距，所以不确定为什么会这样。当然，完全与屏幕左侧齐平看起来不太好，但我喜欢自己控制任何边距大小。
我不能为此使用 jsfiddle，因为在 jsfiddle 中不存在错误。它呈现良好。
话虽如此，这是 html 文件:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body {
background-color: #FFF;
margin: 0;
padding: 0;
}
#footer_enhanced {
height: 50px;
width: 100%;
position: fixed;
bottom: 0px;
line-height: 50px;
float: left;
background-color: #121212;
z-index: 999;
margin: 0px;
left: 0px;
}
#navigation_enhanced {
color: #000;
margin: 0px;
padding: 0px;
height: 50px;
float: left;
clear: both;
}
#navigation_enhanced ul {
list-style: none;
margin: 0;
}
#navigation_enhanced li {
float: left;
line-height: 50px;
}
#navigation_enhanced li a {
display: block;
text-decoration: none;
font-size: 1.125em;
color: #FFF;
margin-right: 0.375em;
padding-right: 0.375em;
padding-left: 0.375em;
letter-spacing: -1px;
}
#navigation_enhanced li a:hover {
color: #000;
background-color: #fff;
}
.current {
display: block;
text-decoration: none;
font-size: 1.125em;
color: #000;
background-color: #fff;
margin-right: 0.375em;
padding-right: 0.375em;
padding-left: 0.375em;
letter-spacing: -1px;
list-style: none;
float: left;
}
</style>
</head>
<body>
<div id="footer_enhanced">
<div id="navigation_enhanced">
<ul>
<li class="current">home</li>
<li><a href="#">cat2</a></li>
<li><a href="#">cat3</a></li>
<li><a href="#">cat4</a></li>
<li><a href="#">cat5</a></li>
</ul>
</div>
</div>
</body>
</html>
最佳答案
默认情况下，“不需要的”空间不存在于 fiddle 中，因为它们会重置(错误地标记为 规范化)css。默认情况下，ul 有一个 padding-left，但 jsfiddle 清除了它。
ul {
padding-left: 0;
}
关于css - 此导航中出现意外(不需要的)左边距，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14244741/