Question

我正在尝试制作一个不错的CSS菜单栏。问题在于，无论每个按钮是否属于它自己的元素，或者它是否位于

元素中，无论哪种方式，它总是执行这个有趣的步骤：

如果你去www.adversign.co.za/steps.jpg

我试过漂浮：左;我已经明确地尝试过了：两个;我用显示器试了一下：inline-block;以及显示：块; 但是，我所做的一切似乎都没有将div的顶部对齐在同一高度。

请有人帮忙。我的代码是这样的：

<div id="list">
<li><a href="index.html">&nbsp;</a></li>
<li><a href="about.html">&nbsp;</a></li>
</div>

和CSS：

#list a { 
float:left; 
display: inline; 
list-style:none; 
background:url(images/home1.png) no-repeat; 
background-position:top left; 
width:104px; 
height:109px; 
font-size:1px; 
color:#000; 
text-decoration:none; 
margin-left:0px;
} 
#list a:hover{ 
background:url(images/home2.png) no-repeat; 
text-decoration:none;

Answer 1

尝试显示：inline-block;

http://jsfiddle.net/VkHVd/

Answer 2

查看http://css-tricks.com/prevent-menu-stepdown/

您说您已尝试display: inline-block;和display: block;

但不是display: inline;

Answer 3

您可以在li元素

上使用带浮点数的ul

http://jsfiddle.net/pB7rt/2/

Answer 4

你的HTML错了。

<div id="list">
<li><a href="index.html">&nbsp;</a></li>
<li><a href="about.html">&nbsp;</a></li>
</div>

而不是

<ul id="list">
<li><a href="index.html">&nbsp;</a></li>
<li><a href="about.html">&nbsp;</a></li>
</ul>

btw：你可以删除display：inline，因为float：left使它无论如何都会阻塞。

这是jsfiddle与您的版本：Your version
这里是jsfiddle与ul而不是div：Correct version

Answer 5

我已经找到了自己做的最佳方式，完全忘记了我在这个论坛上提出这个问题。

<ul id="list">
<li><a href="index.html">&nbsp;</a></li>
<li><a href="about.html">&nbsp;</a></li>
</ul>

我是否拥有HTML，我只是在问题中输入错误。

我现在知道要像我这样做我的CSS

ul#list li {
   float:left;
...etc.
}

然后设置按钮

的样式

ul#list li a {
display:block;
...etc
}

将鼠标悬停在li：

上

ul#list li:hover a {
}

我的浮动分区没有排队

5 个答案: