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

我不确定能不能正确处理，但是浮点数呢？http://jsfiddle.net/n420jmsw/3/

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