我知道这个问题已被问过 100 次，但我就是找不到对我有帮助的话题。我试图将导航栏居中，而我的 div 的宽度为 100%。我只想让我的导航栏居中。任何帮助将不胜感激!这是我的 HTML:
<! Doctype HTML >
<html>
<head>
<meta http-equiv="refresh" content="10" />
<title>NavBar WareHouse</title>
<link rel="stylesheet" type="text/css" href="main.css" />
</head>
<body>
<div id="nav"> <!-- Nav Start -->
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="tabbed.html">Tabbed</a>
<ul>
<li><a href="tab-colour.html">Colourful</a></li>
<li><a href="tab-elegant.html">Elegant</a></li>
<li><a href="tab-complex.html">Complex</a></li>
</ul>
</li>
<li><a href="regular.html">Regular</a>
<ul>
<li><a href="reg-colour.html">Colourful</a></li>
<li><a href="reg-elegant.html">Elegant</a></li>
<li><a href="reg-complex.html">Complex</a></li>
</ul>
</li>
<li><a href="wild.html">Wild</a></li>
</ul>
</div>
</body>
</html>
还有我的 CSS:
/* Main CSS */
html{
font-family: sans-serif;
}
body{
background:#e8e8e8;
}
#nav{
width:100%;
background: #666;
height:38px;
padding:0;
}
#nav ul{
display:inline-block;
text-align:center;
background-color::#666;
width:100%;
padding:0;
margin:0 auto;
list-style: none;
}
#nav li{
width:100%;
text-align: center;
width:75px;
float:left;
position:relative;
padding:10px;
background:#666;
}
#nav li:hover{
background: maroon;
}
#nav a{
padding:10px;
color:#fff;
text-decoration:none;
}
#nav a:hover{
background: maroon;
}
#nav ul ul{
display:none;
}
#nav ul li:hover ul{
width:75px;
text-align: none;
display:block;
position:relative;
left:-10px;
top:10px;
}
最佳答案
您的 CSS 意味着导航栏实际上是居中的，但是因为您将每个元素都设置为整个页面宽度，所以您的导航列表项元素都向左浮动。您实际希望居中导航占总页面宽度的多少？首先计算出该数量并相应地调整 ul 元素。
关于html - 将 NavBar 中心与宽度 :100%; 对齐，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14493052/