我正在为我正在开发的网站制作一个水平页脚导航,但我无法让它正确显示。
基本上,我希望实现的目标是让每个菜单项都在左侧显示一个图像,链接文本的文本相对于图像的中间居中。
我知道这是一个简单的问题,但我尝试解决的所有问题似乎都不起作用。
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>
这里是关联的链接
我们将不胜感激。
最佳答案
我不确定是否正确,但是 float 呢? http://jsfiddle.net/n420jmsw/3/
#footer-links .nav-bar li { padding: 0 10px;float:left; }
关于html - img 在水平导航中无法正确显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27941999/