1

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

1 回答 1

2

默认情况下，小提琴中不存在“不需要的”空间，因为它们重置（错误地标记为normalize）css。默认情况下，ul有一个padding-left，但 jsfiddle 清除它。

ul {
    padding-left: 0;
}
于 2013-01-09T19:19:26.753 回答