导航栏整个宽度均匀地间隔项目答案

【问题标题】：navigation bar entire width spaced items evenly导航栏整个宽度均匀地间隔项目
【发布时间】：2012-11-14 06:18:43
【问题描述】：

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

感谢您的帮助。

【问题讨论】：

标签： css

【解决方案1】：

我会像这样 jsFiddle example 重写你的 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;
}

【讨论】：

您好，感谢您的成功。我没有意识到我需要像这样将列表项放在一行中：
搜索
Legend
Info

这是消除任何可能潜入并导致神秘间隙的空白的技巧。

谢谢。有没有办法在点击时突出显示每个 nav li 部分的开/关？如果您点击它一次（背景更改），悬停效果很好，但当您再次点击它时它不会恢复到原始背景。再次感谢。

【解决方案3】：

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

试试这个：

    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/

【讨论】：