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

【问题标题】：issue with first element in nav bar having extra spacing导航栏中的第一个元素有额外间距的问题
【发布时间】：2014-08-01 23:57:36
【问题描述】：

我的问题是导航栏中的第一个元素“home”比其他元素的间距更大。我似乎无法为我的生活弄清楚它是什么。我想要的只是有一个居中均匀分布的导航栏，但这似乎比我想象的要难。

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>

【问题讨论】：

标签： html css navigation nav

【解决方案1】：

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

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

应该

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

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

【讨论】：