试图找出为什么这些浮动 LI 在 IE7 中不对齐答案

【问题标题】：Trying to find why these floated LIs don't align in IE7试图找出为什么这些浮动 LI 在 IE7 中不对齐
【发布时间】：2012-03-09 05:37:45
【问题描述】：

这里是有问题的页面：[已编辑]

该菜单在 Firefox、Safari、Chrome 和 IE8+ 中看起来很棒。但在 IE7 中，LI 是垂直堆叠的。如果您还没有 IETester，可以下载它来了解我的意思。

这是我的 HTML：

<ul id="menu">
    <li class="you"><a href="">You</a></li>
    <li class="us"><a href="">Us</a></li>
    <li class="contact"><a href="">Contact</a></li>
    <li class="insurance"><a href="">Insurance</a></li>
    <li class="services"><a href="">Services</a></li>
    <li class="blog"><a href="">Blog</a></li>
</ul>

以及对应的CSS：

#header #menu {
    position: absolute;
    bottom: 40px;
    right: 22px;
    float: right;
}

#menu,
#menu li {
    list-style-type: none;
    padding: 0;
    margin: 0;
}


#menu li {
    float: left;
}

#menu a {
    display: block;
    float: right;
    width: 76px;
    height: 25px;
    padding: 45px 0 5px 0;
    text-align: center;
    text-decoration: none;
    color: #555;
    font-size: 90%;
    border: 1px solid #fff;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

#menu .you a {
    background: url(img/icon_you.gif) center 9px no-repeat;
}

#menu .blog a {
    background: url(img/icon_blog.gif) center 9px no-repeat;
}

#menu .us a {
    background: url(img/icon_us.gif) center 9px no-repeat;
}

#menu .insurance a {
    background: url(img/icon_insurance.gif) center 9px no-repeat;
}

#menu .contact a {
    background: url(img/icon_contact.gif) center 9px no-repeat;
}

#menu .services a {
    background: url(img/icon_services.gif) center 9px no-repeat;
}

#menu a:hover {
    background-color: #f6f5f3;
    border: 1px solid #e5e2dd;
    color: #2871ad;
}

非常感谢任何见解。

【问题讨论】：

为什么 li 是向右浮动，然后向左浮动？
这是重复的，它们应该向左浮动。谢谢。

标签： html css internet-explorer-7 cross-browser

【解决方案1】：

不要浮动您的A-标签。您已经在浮动 LI 包装器。另外，不要忘记在列表末尾清除浮动。

【讨论】：

【解决方案2】：

为每个 li 元素定义一个宽度。

【讨论】：