Question

我的问题是导航栏中的第一个元素是＆＃34; home＆＃34;比其余元素有更多的间距。在我的生活中，我似乎无法弄清楚它是什么。我想要的只是一个中心均匀分布的导航栏，但它看起来比我想象的更难。

CSS

.container {
width: 1060px;
background: #FFF;
padding: 50px;
margin: 0 auto;
}


#top_nav { 
position:fixed;
background:#343642;
font-family: Impact, Charcoal, sans-serif;
}

#top_nav ul { 
list-style:none; 
width:100%;
margin:0 auto;
padding:0;
text-align:center;
overflow:hidden;
}

#top_nav ul li {
margin:0 56px 0 0;
padding: 0; 
font-size:1.7em; 
text-transform:uppercase; 
display: inline-block;
font-weight:bold;
}


#top_nav ul li a {
color:#fef6e9; 
text-decoration:none;
display: block;
}

#top_nav ul li a:hover {
color:#ed7163; 
text-decoration:none;
}


.content { padding: 10px 0;}

.content-outer { width:100%; overflow:visible; }

.content-outer .content-inner { width:100%; margin:0 auto; overflow:visible;        position:relative; }

HTML

<div class="content-outer" id="top_nav">

                <ul>


<li><a href="#">Home</a><li>
<li><a href="#">Digital</a></li>
<li><a href="#">Film</a></li>
<li><a href="#">Timeline</a></li>
<li><a href="#">Contact</a></li>                      
                </ul>
            </div>
        </div>

Answer 1

这是因为您没有正确关闭列表中的第一个li。

<li><a href="#">Home</a><li>

应该

<li><a href="#">Home</a></li>

当您遇到格式问题时，请考虑通过标记验证程序（如W3C mark up validator）运行代码。很多时候它的东西很小，比如不匹配的标签，或者没有正确关闭标签，例如在这种情况下。

导航栏中第一个元素有额外间距的问题

1 个答案: