Question

晚上好，

我想要一个集中在屏幕上的导航栏，按钮之间没有间隙。我意识到可以通过'浮动：左'来关闭间隙。但是，这会导致导航栏被刷新到左侧。如果没有'浮动：左'，将会有间隙但集中。如果有人可以帮助我，我将不胜感激。谢谢！

我的css代码如下：

#nav {
    list-style: none;
    font-weight: bold;
    margin-bottom: 10px;
    width: 100%;
    text-align: center;
}

#nav ul {
    list-style-type: none;
    margin: 0px;
    padding: 0;
}

#nav li {
    margin: 0px;
    display: inline;
}

#nav li a {
    padding: 10px;
    text-decoration: none;
    font-weight: bold;
    color: #FFFFFF;
    background-color: #086ba9;
    float: left
}

#nav li a:hover {
    color: #FFFFFF;
    background-color: #35af3b;
}

以下是我的部分HTML代码：

<div id="nav">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Crawler</a></li>
        <li><a href="#">Visual Analytics</a></li>
    </ul>
</div>

干杯， ZH

Answer 1

这是工作代码：

http://jsfiddle.net/surendraVsingh/vU4C8/1/

要在CSS中完成的更改：

#nav ul {
 list-style-type: none;
 padding: 0;
 display:inline-block; /* Add This*/
}

注意： display:inline-block已添加，因此ul仅根据其li的宽度采用宽度，而其他块元素的宽度为100％。

Answer 2

我不知道这种方法是否“健康”，但它为我做了诀窍

#nav ul a{margin:0 -2px;}

CSS导航栏集中，按钮之间没有间隙

2 个答案: