1

我的网站顶部有一个导航栏，但由于某种原因，最后一个“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>

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' */
}
4

1 回答 1

1

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

.sf-menu:after {
  content:'';
  display:block;
  clear: both;
}

此选择器当前不匹配任何内容：

.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;
}

您要选择ul.sf-menu吗？

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

.sf-menu li:last-child {
  padding-right: 0;
}

.sf-menu li:last-child a {
  padding-right: 0;
}
于 2014-07-08T08:23:56.003 回答