Css 导航栏整个宽度间隔均匀的项目

我对css有点陌生。我正在尝试制作一个只有3个文本项的水平导航栏，用于移动设备查看。我将宽度设置为100%，每个部分的宽度设置为32%（我尝试了33%，但它会将第三个项目放在一个新行上）。它看起来还可以，但当我悬停（或使用移动设备单击）时，背景颜色会发生变化，您可以看到边距

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>

谢谢您的帮助。

试试这个：

* { margin:0; padding:0; } // This reset should go at the top of your CSS (if you don't have one already)

.nav li {
    display:block;
    float:left;
    width: 33%;
}
.nav li a {
    display:block;
    text-align: center;
}

    ul.nav {
        width:100%;
        margin:0;
        padding:0;
        list-style:none;
        text-align:center;
        font-family: sans-serif;
    }

    .nav li {
        display:inline;
    }

    .nav a {
        width:32%;
        text-align:center;
        display:inline-block;
        padding-bottom:13px;
        padding-top:12px;
        margin-left: 1px;
        background: #62564A;            
    }

    .nav a:hover {
        background:#A26A42;
    }

    ul.nav li:first-child a{
        margin-left: 0;
    }

---

小提琴：

我会像这样修改你的CSS

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

在“悬停”按钮上，您可以使菜单项比正常菜单项窄。另外，你移除了边界，这将使它更加狭窄。此外，看起来您正在使用1px左右边框作为间距。如果是这种情况，请使用边距。使用JSFIDLE进行练习

试试这个：

* { margin:0; padding:0; } // This reset should go at the top of your CSS (if you don't have one already)

.nav li {
    display:block;
    float:left;
    width: 33%;
}
.nav li a {
    display:block;
    text-align: center;
}

    ul.nav {
        width:100%;
        margin:0;
        padding:0;
        list-style:none;
        text-align:center;
        font-family: sans-serif;
    }

    .nav li {
        display:inline;
    }

    .nav a {
        width:32%;
        text-align:center;
        display:inline-block;
        padding-bottom:13px;
        padding-top:12px;
        margin-left: 1px;
        background: #62564A;            
    }

    .nav a:hover {
        background:#A26A42;
    }

    ul.nav li:first-child a{
        margin-left: 0;
    }

---

谢谢你，这很有效。但是现在我在导航栏和下一个div（地图画布）之间有一个小的空白。有没有办法摆脱这个问题？@Andrew不确定是否看到了代码的其余部分，但我更新了我的提琴，添加了一个后续的div（没有空间）。嗨，谢谢你的帮助。我没有意识到我需要将列表项放在一行，就像这样：

当我试图将每个项目放在单独的一行时，“Info”使用jfiddle放在第二行，这是一个消除任何空白的窍门，可以悄悄进入并造成神秘的空白。谢谢。点击每个导航li区段时，是否有方法突出显示其开/关？如果点击一次鼠标悬停（背景会发生变化），效果会很好，但再次点击鼠标悬停时不会恢复到原始背景。再次感谢。