Question

我希望创建一个延伸100％的导航栏，并为每个列表项具有相同的长度。我现在拥有的代码确实延伸了100％，但有些项目不是中心对齐的，而且＃34; home＆＃34;和＆＃34;联系＆＃34;物品有不需要的空白区域。这个问题的最佳解决方案是什么？

此外，如果你有时间，我想边框下拉菜单而不加倍边框。如果查看我的代码，您可以看到它有一个外边框，并且在单个列表项上还有一个左边框（除了第一个项目）。关于这个问题的帮助也将不胜感激。

HTML

<div id="wrapper">
    <header>
        <div class="logo"><a href="index.html"><img src="http://i.imgur.com/IL1agD5.png"/></a></div>
        <div class="chapter"><a><img src="http://i.imgur.com/RPIvgdD.png"/></a></div>
    </header>
    <nav>
        <ul class="menu">
            <li><a href="#">Home</a>

            <li><a href="#">About ▾</a>
                <ul class = "sub-menu">
                    <li><a href="#">History</a>
                    </li>
                    <li><a href="#">Brothers</a>
                    </li>
                </ul>
            <li><a href="#">Philanthropy ▾</a>
                <ul class="sub-menu">
                    <li><a href="#">Kovacs Color Run</a>
                    </li>
                    <li><a href="#">Greek God</a>
                    </li>
                    <li><a href="#">Boys & Girls Club</a>
                    </li>
                </ul>

            <li><a href="#">Membership</a>
            <li><a href="#">Photos</a>
            <li><a href="#">Contact</a>

        </ul>
    </nav>

CSS

    #wrapper {
    min-width:900px;
    margin:0 auto;
}
body {
    margin:0px;
    padding:0px;
}

header {
    height:100px;
    width:100%;
    background:black;
    margin:0 auto;

}
.logo{
    padding-left:10px;
    float:left;
    padding-top:5px;
}

.chapter {
    float:right;
    padding-top:15px;
    padding-right:10px;
}


.menu{
    margin:0 auto;
    padding:0 auto;
    text-align:center;
}

ul.menu {
    background-image: -o-linear-gradient(bottom, #ACB5B5 0%, #E2F0EA 100%);
    background-image: -moz-linear-gradient(bottom, #ACB5B5 0%, #E2F0EA 100%);
    background-image: -webkit-linear-gradient(bottom, #ACB5B5 0%, #E2F0EA 100%);
    background-image: -ms-linear-gradient(bottom, #ACB5B5 0%, #E2F0EA 100%);
    background-image: linear-gradient(to bottom, #ACB5B5 0%, #E2F0EA 100%);
    height: 40px;
    width: 100%;
    border-left:solid 1px #22674A;
    white-space: nowrap;
    text-align:center;
}

ul.menu > li {
    position: relative;
    display:inline-block;
    list-style:none;
    text-align:center;
    width:16.66%;
    border-style:1px #22674A;
}
ul.menu li:first-child a {
    border-left:none;
}
ul.menu li:last-child a {
    border-right:none;
}
ul.menu ul {
    background-image: -o-linear-gradient(bottom, #E2F0EA 0%, #ACB5B5 100% );
    background-image: -moz-linear-gradient(bottom, #E2F0EA 0%, #ACB5B5 100% );
    background-image: -webkit-linear-gradient(bottom, #E2F0EA 0%, #ACB5B5 100%);
    background-image: -ms-linear-gradient(bottom, #E2F0EA 0%, #ACB5B5 100%);
    background-image: linear-gradient(to bottom, #E2F0EA 0%, #ACB5B5 100% );
    display: none;
    position: absolute;
    padding:0 auto;
    border-left:none;
    border:solid 1px #22674A;
}
ul.menu a {
    cursor: pointer;
    display: block;
    color: #22674A;
    line-height: 40px;
    width:140px;
    text-decoration:none;
    font-weight:500;
    font-family: 'Bree Serif', serif;
    border-left:solid 1px #22674A; 
}
ul.menu li {
    list-style: none;
}
ul.menu li:hover {

}
ul.menu li:hover ul {
    display: block;
    width:100%;
    text-align:center;
    padding:0;
    padding-left:10px;
}

的jsfiddle

http://jsfiddle.net/rsheo0Lv/

Answer 1

您需要清除之前nav元素中的ul或float：

.menu{
    margin:0 auto;
    padding:0 ;/* just fine with 0 */
    text-align:center;
    clear:both; /* clear from floats ahead in the flow */
}

http://jsfiddle.net/rsheo0Lv/1/

Answer 2

GCyrillus以正确的方式做到了。

您还必须从链接中删除宽度：

ul.menu a {
    cursor: pointer;
    display: block;
    color: #22674A;
    line-height: 40px;
    /* width: 140px;   remove !!*/
    text-decoration: none;
    font-weight: 500;
    font-family: 'Bree Serif', serif;
    border-left: solid 1px #22674A;
}

要删除下拉列表中的边框，请添加以下内容：

ul.menu ul a{
    border-left: none;
    border-right: none;
}

Fiddle

水平导航栏中的等长中心对齐列表项

2 个答案: