Question

我是CSS的新手，但一直在学习，做妈妈的小企业网站以节省她的钱，但我的导航栏有一点CSS麻烦。基本上，如果你去这里：http://area25dallas.com/s并查看导航栏，我在使用il列表时遇到问题，使图像垂直排列（而不是与顶部对齐，这是他们目前正在做的）文本，也出于某种原因，图像是彼此重叠而不是彼此相邻（我不希望它们在单独的列表中，如文本链接，因为边距太分散）。

我一直在玩CSS并且还用谷歌搜索出来但仍然没有找到解决方案。这有什么快速解决方法吗？

谢谢！

编辑：这里是HTML和CSS blip但是如果你使用chrome我觉得只是检查元素是查看正在发生的事情最简单的方法

<div id = "header">
  <div class = "container">
   <a href = "index.htm" id = "logo"></a>
<ul id = "main-menu">
<li class = "active"><a href = "">home</a></li>
<li><a href = "">about</a></li>
<li><a href = "">gallery</a></li>
<li><a href = "">press</a></li>
<li><a href = "">contact</a></li>
<li><a href = ""><img src="images/twitter_newbird_boxed_ white.png" /></a>
<a href = ""><img src="images/Pinterest_Favicon white.png" /></a></li> 

</ul>

   </div>
</div>

和CSS

#main-menu
{
float: right;
position:relative;
top:122px;
right:150px;
}
#main-menu li
{
float: left;
margin: 30px 12px 15px 12px;
padding:0;
height:23px;
list-style:none;
line-height:20px;
}

#main-menu li:hover, #main-menu li.active { background-position: 0 -23px;}
#main-menu li:hover a, #main-menu li.active a{
background-position: 100% -30px;
}
#main-menu li a
{
display:block;
padding:0px 15px 5px 10px;
font-size:17px;
color:#fff;
text-decoration:none;
}

Answer 1

图像被分成多行，因为它们位于＆lt; a＆gt;内。标记已被设置为块级元素。将样式更改为：

#main-menu {
    float: right;
    position: relative;
    right: 75px; /* Changed */
    top: 122px;
}

#main-menu li a {
    color: #fff;
    display: inline-block; /* Changed */
    font-size: 17px;
    padding: 0 15px 5px 10px;
    text-decoration: none;
}

/* New */
#main-menu li a img {
    position: relative;
    top: -10px;
}

底部的新规则会将图像向上移动一点点。你可以使用你的css并以很多不同的方式得到相同的结果 - 我采用了一种方法，不需要对现有工作进行很多改动。

Answer 2

感谢您的提示，伙计们，这也帮助了我在我的CSS导航中的图像。

我还建议添加一些代码以减轻间距问题...

#main-menu li a img {
position:absolute;
background:inherit;
    top: 0px;
margin-bottom:auto;
max-height: 33px;

}

CSS水平导航列表垂直对齐文本和图像链接

2 个答案: