Html 导航栏，最后一个li没有与其他li对齐，我不能使用最后一个大约50px的导航栏？

我的网站顶部有一个导航栏，但由于某些原因，最后一个“li”（联系人）与其他按钮不对齐，最后一个“li”后有某种填充，我没有编码，这很奇怪。有没有可能有人可以看一下

HTML

<div class="menu">

                <nav>
                    <ul class="sf-menu">
                        <li><a href="index.html"class="current">Home<em>start here</em></a></li>
                        <li><a href="History.html">History<em>our legacy</em></a></li>
                        <li><a href="index-2.html">Repertoire<em>our dances</em></a></li>
                        <li><a href="index-3.html">Members<em>our dancers</em></a></li>
                        <li><a href="index-4.html">Join us<em>come &amp; learn</em></a></li>
                        <li><a href="Contact.html">contact<em>reach us</em></a></li>
                    </ul>
                </nav>
        </div>

---

在您发布的代码示例中，浮动元素之后没有任何内容，这可能是一个问题；清除菜单容器后的浮动

.sf菜单：之后{
内容：''；
显示：块；
明确：两者皆有；
}

---

此选择器当前与以下内容不匹配：

.sf菜单{
位置：绝对位置；
宽度：185px；
边界：无；
填充：10px 0 10px 0 px；
背景#1c1c；
边界半径：6px；
-moz边界半径：6px；
-webkit边界半径：6px；
}

是否要选择

ul.sf菜单

---

您可能还希望删除/修改最后一项的填充：

.sf菜单li：最后一个孩子{
右边填充：0；
}
.sf菜单李：最后一个孩子a{
右边填充：0；
}

在您发布的代码示例中，浮动元素之后没有内容，这可能是一个问题；清除菜单容器后的浮动

.sf菜单：之后{
内容：''；
显示：块；
明确：两者皆有；
}

---

此选择器当前与以下内容不匹配：

.sf菜单{
位置：绝对位置；
宽度：185px；
边界：无；
填充：10px 0 10px 0 px；
背景#1c1c；
边界半径：6px；
-moz边界半径：6px；
-webkit边界半径：6px；
}

是否要选择

ul.sf菜单

---

您可能还希望删除/修改最后一项的填充：

.sf菜单li：最后一个孩子{
右边填充：0；
}
.sf菜单李：最后一个孩子a{
右边填充：0；
}

。什么浏览器？这是水平对齐问题吗？是否与背景图像对齐？是的，但与背景图像无关。是文本没有对齐。它们都排列得很漂亮，但由于某些原因，最后一个li（联系人）与其他li（联系人）不对齐？您是否使用CSS重置来确保未应用任何浏览器样式？UL等元素是使用重置的核心原因。David，我刚刚在另一个浏览器中检查了该网页，它工作正常，因此我认为这可能是问题所在。我不知道CSS重置是什么，你能详细说明一下吗？非常感谢。什么浏览器？这是水平对齐问题吗？是否与背景图像对齐？是的，但与背景图像无关。是文本没有对齐。它们都排列得很漂亮，但由于某些原因，最后一个li（联系人）与其他li（联系人）不对齐？您是否使用CSS重置来确保未应用任何浏览器样式？UL等元素是使用重置的核心原因。David，我刚刚在另一个浏览器中检查了该网页，它工作正常，因此我认为这可能是问题所在。我不知道CSS重置是什么，你能详细说明一下吗？非常感谢。

.menu {
    background:url(images/nav-bg.png) top center no-repeat;
    height:116px;   
    margin:0px 0 0px 0;
}
#page1 .menu {
    margin-top:-188px;
}
nav {
    padding:0px 0 0 0;
}

.sf-menu {
    margin:         0;
    padding:        0;
    list-style:     none;
    width:100%;
    background:none;
    position:relative;
    z-index:50
}
.sf-menu li {
    float:left;
    font-size:1.3333em;
    line-height:1.2307em;
    text-transform:uppercase;
    position:relative;
    padding:0 10px 0 0
}
.sf-menu .last {
    padding-right:0;
}

    .sf-menu li a {
        text-decoration:none;
        display:inline-block;
        zoom:1;
        position:relative;
        z-index:20;
        color:#000;
        text-align:center;
        padding:50px 26px 33px 26px;
        font-family: 'Cantarell', arial, serif;
}
    .sf-menu li a em {
        color:#9f9f9f;
        font-size:0.5625em;
        line-height:1.2307em;
        display:block;
    }


.sf-menu ul {
    position:absolute;
    width: 185px;
    border:none;
    padding:10px 0 10px 0px;
    background:#1c1c1c;
    border-radius:6px;
    -moz-border-radius:6px;
    -webkit-border-radius:6px;

}

    .sf-menu li a:hover {
        background:url(images/nav-hover.png) left top repeat-x;
        color:#fff;
    }
    .sf-menu .current {
        border-radius:6px 6px 0 0;
        -moz-border-radius:6px 6px 0 0;
        -webkit-border-radius:6px 6px 0 0;
        position: relative;
        background:url(images/nav-current.gif) left top repeat-x;
    }
        .sf-menu li .current:hover {
            background:url(images/nav-current.gif) left top repeat-x;
            color:#000;
        }
            .sf-menu li .current:hover em {
                color:#9f9f9f;
            }
    .sf-menu li a:hover em {
        color:#fff;
    }


.sf-menu ul li {
    width:          100%;
}
.sf-menu li:hover {
    visibility:     inherit; /* fixes IE7 'sticky bug' */
}