0

我正在尝试使水平菜单看起来很漂亮。
这是我的 HTML 外观的示例。

<div id="menu">
<ul>
    <li><a class="selected" href="index.html">Home</a></li>
    <li><a href="bio.html">Bio</a></li>
    <li><a href="labs.html">Labs</a></li>
    <li><a href="assignments.html">Assignments</a></li>
</ul>
</div>

这是我的 CSS 中的一个片段。它在 Firefox 中完成了这项工作，但在 IE 中没有。

#menu {
margin:auto;
padding-top: 4px;
width: 800px;
}

#menu ul
{
float:left;
list-style-type:none;
margin:0;
padding:0;
padding-top:7px;
padding-left:20px;
}    

#menu li
{
font: 87.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
display:inline-block;
}

#menu a, #menu a.selected
{
text-decoration:none;
color:#000;
background-color:#fff;
background-image:url('../images/menu-unselected.jpg');
background-repeat:repeat-x;
padding-top:4px;
padding-bottom:0px;
padding-left:12px;
padding-right:12px;
border:solid;
border-width: 1px 1px 1px 1px;
border-color:#000;
}

#menu a.selected
{
padding-top:7px;
padding-bottom:1px;
border-width: 1px 1px 0px 1px;
}

#menu a:hover, #menu a.selected
{
background-image:url('');
}

我可以对 css 进行更改以使其在 IE 中正常工作，但它在 FireFox 中不起作用！以下是在每个浏览器中呈现的上述代码的屏幕截图：

火狐：这里

Internet Explorer：这里

4

3 回答 3

0

在你display: inline-block;的 .display: inline;li

然后添加display: block; float: left;到您的a.

然后，您将通过a标签（例如text-align、width等）更改选项卡的样式。

于 2011-10-13T17:46:04.683 回答
0

这对我有用。

在#menu li 上而不是 display:inline; 用浮动替换它：左；

然后在#menu a.selected 上使用填充和边距重新定位它比其他更高。我补充说：

padding-bottom:4px;
padding-top:7px;
margin-top:5px;

显示：块；在#menu a 上似乎是可选的。我在 FF 7.0.1 的 Mac 上，它看起来是正确的。在IE中看不到。希望有帮助。

于 2011-10-12T21:01:48.947 回答
0

我倾向于使用display:inline-block;而不是float:left;在可能的情况下使用，并且跨浏览器从来没有问题。所以我建议你使用#menu li{ display:inline-block;}.

显然，所有更改都与您的默认布局有关……包装器、页面、正文、html 等……

于 2011-10-13T02:35:38.813 回答