我的浮動Divs不排隊

Question

我正在嘗試制作一個不錯的CSS菜單欄。 問題不在於每個按鈕是在其自己的元素中還是在一個按鈕中。

元素，無論哪種方式，它總是會執行以下有趣的步驟：

如果您訪問www.adversign.co.za/steps.jpg

我嘗試過float：left; 我已經嘗試過了： 我已經嘗試過使用display：inline-block; 以及display：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

試試display：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元素上使用帶float：left的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> 

順便說一句：您可以刪除display：inline，因為float：left仍然會阻止它。

這是jsfiddle與您的版本： 您的版本
這是帶有ul而不是div的jsfiddle： 正確的版本

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