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; }

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

1 个答案: