导航栏整个宽度等距离排列的项目

Question

导航栏整个宽度等距离排列的项目

4

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

感谢您的帮助。

- Andrew

3个回答

1

试试这个：

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

代码编辑器：http://jsfiddle.net/kboucher/duaa6/

- Kevin Boucher

谢谢，这个方法可行。不过现在在我的导航栏和下一个 div（即地图画布）之间出现了一小段白色空间。有什么方法可以消除它吗？ - Andrew

@Andrew 不确定没有看到其他代码，但我更新了我的 fiddle 以包含一个后续的 div（它没有空格）http://jsfiddle.net/kboucher/duaa6/ - Kevin Boucher

0

当鼠标悬停时，您可以使菜单项比正常情况下更窄。此外，您还可以删除边框，这将使其变得更窄。另外，看起来您正在使用1像素的左右边框进行间距控制。如果是这种情况，请改用margin属性。建议使用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/

- Jamal Ali

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- j08691 · Accepted Answer

我会将您的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;
}