Question

我想在我的网页顶部设置一个导航栏，使其居中。我一直在寻找几个小时，但却无法让它发挥作用。

这是我想要集中的HTML。

<div id="nav">
<ul>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>        
    <li><a href="#">My CV profile</a></li>
</ul>

这里有一些我在网上发现的CSS并不完全有用。

#nav {
width: 100%;
float: left;
margin: 0 0 1em 0;
padding: 0;  }

#nav ul {
list-style: none;
width: 800px;
margin: 0 auto;
padding: 0; }

#nav li {
float: left; }

#nav li a {
display: block;
padding: 8px 15px;
text-decoration: none;
font-family: 'calibri light', arial;
color: #069; }

我是一个相当无能的开发者，但是我错过了一些明显的东西吗？

Answer 1

这里有效。只需根据你的要求改变margin-left属性

#nav {
width: 100%;
float: left;
margin-left:300px;
padding: 0;  }

#nav ul {
list-style: none;
width: 800px;
margin: 0 auto;
padding: 0; }

#nav li {
float: left; }

#nav li a {
display: block;
padding: 8px 15px;
text-decoration: none;
font-family: 'calibri light', arial;
color: #069; }

<div id="nav">
<ul>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>        
    <li><a href="#">My CV profile</a></li>
</ul>

Answer 2

您可以将文本对齐中心设置为父级并显示：以子级为中心的内联块。示例：

#nav {
background: #fff;
width: 100%;
text-align: center;
width: 100%;
padding: 0;  
}

#nav ul {
list-style: none;
margin: 0 auto;
padding: 0; }

#nav li {
display: inline-block;
}

#nav li a {
display: block;
padding: 8px 15px;
text-decoration: none;
font-family: 'calibri light', arial;
color: #069; }

<div id="nav">
<ul>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>        
    <li><a href="#">My CV profile</a></li>
</ul>

如何在CSS中居导航栏

2 个答案: