0

我正在尝试制作一个不错的 CSS 菜单栏。问题在于每个按钮是在它自己的元素中还是在

  • 元素，无论哪种方式，它总是做这个有趣的步进事情：

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

    我试过浮动：左；我已经用 clear:both 试过了；我已经用 display: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;
    • 4

    5 回答 5

    2

    试试 display:inline-block;

    http://jsfiddle.net/VkHVd/

    于 2012-09-11T12:50:34.017 回答
    1

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

    你说你试过display: inline-block;了display: block;

    但不是display: inline;

    于 2012-09-11T12:53:59.503 回答
    1

    您可以在 li 元素上使用带有 float:left 的 ul

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

    于 2012-09-11T13:06:03.527 回答
    1

    你的 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：正确的版本

    于 2012-09-11T13:49:44.463 回答
    0

    我自己找到了最好的方法，完全忘记了我在这个论坛上问过这个问题。

    <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 {
}
    于 2014-11-07T23:37:06.103 回答