我有这个简单的导航,我把它放在一起,出于某种原因,在第一个链接开始之前我得到了大约 40px 的左边距。我在 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>