Question

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

Answer 1

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

ul {
    padding-left: 0;
}

此导航上出现意外（不需要的）左边距

1 个答案: