Question

我的代码很简单，我只想要一个水平显示链接的导航栏。应该很容易，但我从来没有做过。网上找到的例子如下：

<!-- Navigator -->
    <div id="nav">
        <ul>
            <li><a href="#">Anchor 1</a></li>
            <li><a href="#">Anchor 2</a></li>
            <li><a href="#">Anchor 3</a></li>
        </ul>
    </div>

和CSS：

/* So it's cantered on top */
#nav {
margin:0 50%; 
position:fixed;

}

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

#nav ul li {
float:left;
}

据我所知，这应该工作，有人可以请问我有什么不对吗？删除位置：固定#nav会使其水平，但不会粘在我的视口顶部。

Answer 1

你只是复杂的事情。摆脱你使用的所有位置，因为你根本不需要它们。我只是在codepen上嘲笑了一些东西让你看看：http://codepen.io/nighrage/pen/mhgze。以下css就是您所需要的，菜单将在一定程度上响应。如果您想要除了显示内容之外还想做些什么，请告诉我。

#nav ul {
list-style-type:none;
margin:0;
padding:0;
width:100%;
float:left;
text-align:center;
}   

#nav ul li {
display:inline-block;
padding: 0 10px;
}

Answer 2

尝试从ul中删除位置：绝对值。我认为不需要实现你的目标。

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

Answer 3

由于两个原因，它无法正常工作： 1.保证金 3.我认为列表项被设置为绝对（继承）。将其设置为静态。

这是一个小提琴：http://jsfiddle.net/txDSa/

#nav {
position:fixed;
}

#nav ul {
list-style-type:none;
margin:0 !important;
padding:0;
position: static;
}   

#nav ul li {
margin:0 ;
float:left;
}

Answer 4

您可以移除绝对位置http://jsfiddle.net/gdiamond/Jn9P6/

#nav {
margin:0 auto;
width:300px;
}

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

#nav ul li {
float:left;
padding-left: 12px;
}

Answer 5

/* So it's cantered on top */
#nav {
text-align:center;
}

#nav ul {
display:inline;
}   

#nav ul li {
display:inline-block;
padding:10px;
}

Jsfiddle：http://jsfiddle.net/4EJHF/

基本上，您希望文本对齐以居中在nav元素上。然后你的无序列表应该内联显示。最后，您的列表元素应显示为内联块。

还有另一种方法有两个浮点数，但您需要手动居中导航：

#nav ul {
float:left;
list-style-type:none;
}   

#nav ul li {
float:left;
padding:10px;
}

关于水平导航栏

5 个答案: