0

我的 CSS 是：

#menu {
    background-color: #a40a0a;
    width: 830px;
    height: 36px;
    position: relative;
    top: 39px;
    left: 172px;
}
#menu >ul {
    list-style-type: none;
}
#menu ul li {
    font-family: Arial, Helvatica, Verdana;
}
#menu ul li >a {
    display: block;
    float: left;
    text-decoration: none;
    color: #ffffff;
    line-height: 36px;
    width: 166px;
    text-align: center;
}
#menu ul li >a:hover {
    background-color: #d74343;
    border-bottom: 2px solid #bc1515;
    line-height: 34px;
}
#menu ul li >a:active {
    background-color: #a40a0a;
}

此菜单看起来不正确 ie7 及以下。如果是错的，请告诉我正确的，谢谢。

http://jsfiddle.net/a4Qe3/这里是链接

4

1 回答 1

1

你需要穿上float而li不是a。这是因为 li 每次都会阻塞。

这是更新的代码：

CSS

#menu {
    background-color: #a40a0a;
    width: 830px;
    height: 36px;
    position: relative;
    top: 39px;
    left: 172px;
}
#menu > ul {
    list-style-type: none;
}
#menu ul li {
    font-family: Arial, Helvatica, Verdana;
    float: left;
}
#menu ul li > a {
    display: block;
    text-decoration: none;
    color: #ffffff;
    line-height: 36px;
    width: 166px;
    text-align: center;
}
#menu ul li > a:hover {
    background-color: #d74343;
    border-bottom: 2px solid #bc1515;
    line-height: 34px;
}
#menu ul li > a:active {
    background-color: #a40a0a;
}

演示

编辑 1

我们把 the 放在 thefloat上，li而不是 the，a因为每个a都包裹在适用于每个的 ali中。display: block;如果您考虑 DOM 结构，如果您浮动a标签，您就是浮动的项目，它们彼此相邻，它们不在同一个范围内。它们不是 DOM 兄弟姐妹。他们的父母是。所以你只是让他们的父母闲逛。现在在 IE7 中，如果您在阻塞元素之后浮动，则该浮动项目将被向下推，就像您的情况一样。所以我们应该做的是浮动li项目。

这是一个标签浮动的演示，a我在标签周围放置了一个边框li以显示正在发生的事情。在 IE7 中检查它。

于 2012-11-24T23:15:42.610 回答