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

Question

我想创建一个导航栏，它可以100%拉伸，每个列表项的长度相等。我现在的代码确实扩展了100%，但有些项目没有居中对齐，"主页"one_answers"联系人"项目有多余的空白。这个问题的最佳解决方案是什么？

如果你有时间的话，我想在不加倍边框的情况下将下拉菜单边框去掉。如果你查看我的代码，你可以看到它有一个外部边界，也有一个单独列表项的左边界（除了第一项）。在此问题上提供帮助也将不胜感激。

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

您需要从以前的float廷元素中清除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