CSS 导航栏全宽间隔项目均匀

navigation bar entire width spaced items evenly

提问by Andrew

I'm a bit new to css. I'm trying to make a horizontal navigation bar with only 3 text items for mobile device viewing. I have width set to 100% and each section width set to 32% (I tried 33% but it would place the 3rd item on a new line.) It looks ok as it is, but when I hover (or click on using a mobile device) the background color changes and you can see the margins.

我对 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;
}

End of CSS

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>

Thank you for any help.

感谢您的任何帮助。

采纳答案by j08691

I'd rework your CSS like this jsFiddle example.

我会像这个jsFiddle example一样修改你的 CSS 。

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

回答by Kevin Boucher

Try this:

尝试这个：

* { 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;
}

Fiddle: http://jsfiddle.net/kboucher/duaa6/

小提琴：http: //jsfiddle.net/kboucher/duaa6/

回答by Jamal Ali

On "hover" you make the menu items narrower than normal. Plus you remove ther border which will narrow it even more. Also, It looks like you are using a 1px border left and right for spacing. If this is the case use margin instead. Use jsfiddle to practice.

在“悬停”时，您可以使菜单项比正常情况更窄。另外，您删除了边框，这将使其更窄。此外，看起来您在左右使用 1px 边框作为间距。如果是这种情况，请改用保证金。使用jsfiddle练习。

Try this:

尝试这个：

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

http://jsfiddle.net/mVv75/4/

http://jsfiddle.net/mVv75/4/