html - img 在水平导航中无法正确显示

Question

我正在为我正在开发的网站制作一个水平页脚导航，但我无法让它正确显示。

基本上，我希望实现的目标是让每个菜单项都在左侧显示一个图像，链接文本的文本相对于图像的中间居中。

我知道这是一个简单的问题，但我尝试解决的所有问题似乎都不起作用。

CSS

#footer-links{ border: 1px solid black; height:90px; width:100%;}

#footer-links .nav-bar { list-style:none;}

#footer-links .nav-bar li { display:inline; padding: 0 10px; }

#footer-links .nav-bar li a {
padding-left: 115px; /* Create padding on the left where the icon goes */
text-decoration: none;
text-transform: uppercase;
color: #333;
text-shadow: 1px 1px 1px #ccc;}


.nav-bar .nav-button-developments a { background:url("http://mulgraveproperties.co.uk/wp-content/uploads/2013/05/icon11.jpg") no-repeat 0px -2px transparent; }

.nav-bar .nav-button-news a { background:url("http://mulgraveproperties.co.uk/wp-content/uploads/2013/05/icon21.jpg") no-repeat 0px -2px transparent;  }

.nav-bar .nav-button-contact a { background:url("http://mulgraveproperties.co.uk/wp-content/uploads/2013/05/icon31.jpg") no-repeat 0px -2px transparent; }

HTML

<nav id="footer-links">
     <ul class="nav-bar">
          <li class="nav-button-developments"><a href="http://www.mulgraveproperties.co.uk/index.php/our-developments/">Our Developments</a></li>
          <li class="nav-button-news"><a href="http://www.mulgraveproperties.co.uk/index.php/category/news/">News</a></li>
          <li class="nav-button-contact"><a href="http://www.mulgraveproperties.co.uk/index.php/contact-2/">Contact Us</a></li>
     </ul>
</nav>

这里是关联的链接

http://jsfiddle.net/n420jmsw/

我们将不胜感激。

Answer 1

我不确定是否正确，但是 float 呢？ http://jsfiddle.net/n420jmsw/3/

#footer-links .nav-bar li { padding: 0 10px;float:left; }