为什么在我的无序列表之前存在差距？

Question

我想实现这个目标：

我实现了这个目标：

导航左侧有间隙。我不明白为什么会这样。页面位于http://goo.gl/K17Fjs

我的标记： -

<footer>
<div id="contact-info">
<p><span id="footer-text-big">Contact Us:</span></p>
<p>
Tel: +974 44151991<br />
P.O.Box: 202315, Doha – Qatar<br />
E-mail: hajrisalemal@gmail.com<br />
krishnabhw1@yahoo.com
</p>
</div>
<div id="footer-nav">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="projects.html">Projects</a></li>
<li><a href="photogallery">Photo Gallery</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
<div id="copyright">
Copyright &copy; 2014 SALEM AL HAJRI. All Rights Reserved.
</div>
</footer>

我的CSS： -

footer { height: 158px; color:#FFF; margin-top: 25px; padding-top: 30px; font-size: 11px; font-family:Arial, Helvetica, sans-serif;}
#contact-info { float: right; text-align: right;}
#footer-text-big { font-size:13px;}
#footer-nav { float: left; width: 600px; text-align: left;}
#footer-nav li { display: inline;}
#footer-nav a {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
color: #ffffff;
text-decoration: none;
margin-right: 30px;
}
#copyright { width: 600px; float: left; text-align: left; margin-top: 65px;}

Answer 1

现在定义您的#footer-nav ul padding-left : 0就像这样

#footer-nav ul{padding-left:0;}

Answer 2

试一试

#footer-nav ul{
  padding:0;
}

Answer 3

列表（ul和ol）默认具有填充和边距设置。你应该手动更改它，所以如果你不想要任何边距你应该添加到你的CSS：

#footer-nav ul {margin:0; padding: 0;}

或

#footer-nav ul {margin-left:0; padding-left: 0;}

或设置一些其他自定义值，例如

#footer-nav ul {margin-left: 10px; padding-left: 0;}

另外我看到你使用HTML5。您应该创建nav元素而不是div id =＆＃34; footer-nav＆＃34;