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

Question

我希望创建一个 100% 延伸且每个列表项长度相等的导航栏。我现在拥有的代码确实拉伸了 100%，但有些项目没有居中对齐，并且“家庭”和“联系人”项目有不需要的空白。这个问题的最佳解决方案是什么？

另外，如果您有时间，我想在不加倍边框的情况下将下拉菜单加边框。如果您查看我的代码，您会发现它在单个列表项（除了第一项）上有一个外部边框和一个左边框。对此问题的帮助也将不胜感激。

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

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

.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