css - 导航栏整个宽度均匀间隔元素

Question

我对 CSS 有点陌生。我正在尝试制作一个只有 3 个文本项的水平导航栏，供移动设备查看。我将宽度设置为 100%，每个部分的宽度设置为 32%(我试过 33%，但它会将第 3 个元素放在新的一行上。)它看起来没问题，但是当我悬停(或单击使用移动设备)背景颜色发生变化，您可以看到边距。

ul.nav {
    width:100%;
    margin:0 auto;
    padding:0;
    list-style:none;
    display:inline-block;
    background-color:#62564A;
    text-align:center;
    font-family: sans-serif; 
}

.nav li { 
        display:inline;
    }

.nav a {
    width:33%;
    text-align:center;
    display:inline-block;
    padding-bottom:13px;
    padding-top:12px;
    border-left: 1px solid #fff;
    border-right: 1px solid #fff;
}

.nav a:hover { 
    background:#A26A42;
    border:none;
    width:32%
}

ul.nav li:first-child a{
    border:none;
}
ul.nav li:last-child a {
    border:none;
}

CSS 结束

<ul class="nav">
        <li><a href="#">Search</a></li>
        <li><a href="#">Legend</a></li>
        <li><a href="#">Info</a></li>
</ul>
<div id="map_canvas" style="position:absolute;left:0;right:0;"></div>

感谢您的帮助。

Answer 1

我会像这样修改你的 CSS jsFiddle example .

CSS

ul.nav {
    width:100%;
    margin:0 auto;
    padding:0;
    list-style:none;
    background-color:#62564A;
    text-align:center;
    font-family: sans-serif; 
}
.nav li { 
    display:inline-block;
    width:33%;
    margin:0;
    padding:0;
}
.nav a {
    text-align:center;
    padding:12px 0 13px 0;
    margin:0;
    border-left: 1px solid #fff;
    border-right: 1px solid #fff;
    display:block;
}
.nav a:hover { 
    background:#A26A42;
    border:none;
}

ul.nav li:first-child a{
    border:none;
}
ul.nav li:last-child a {
    border:none;
}​