css - 为什么我的无序列表之前有空隙？

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

列表(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="footer-nav"