为什么在我的无序列表之间有差距？ [英] Why is there gap before my Unordered list?

问题描述

我想达到这个目的：

I want to achieve this:

我已经实现了：

I have achieved this:

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

There is gap on left of the navigation. I don't understand why it is there. Page is live at http://goo.gl/K17Fjs

我的标记： -

<footer>
<div id="contact-info">
<p><span id="footer-text-big">Contact Us:</span></p>
<p>
Tel: [phone]<br />
P.O.Box: 202315, Doha – Qatar<br />
E-mail: [e-mail]<br />
[e-mail]
</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;}

推荐答案

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

Lists (ul and ol) have by default padding and margin set. You should change it manually, so if you don't want any margins you should add to your css:

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

或

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

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

or set some other custom values as for example

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

此外，我看到你使用HTML5。您应该创建nav元素，而不是div id =footer-nav

In addition I see you use HTML5. You should rather create nav element instead of div id="footer-nav"

这篇关于为什么在我的无序列表之间有差距？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！