我的 CSS 下拉菜单没有居中!谁能告诉我为什么？这是我的 index.html 页面的代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="main.css">
<meta charset="UTF-8">
<title>CSS Drop Down</title>
</head>
<body bgcolor="white">
<h1><center>ETst</center></h1>
<div class="menu">
<ul>
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">Photos</a>
</li>
<li>
<a href="#">Contact</a>
<ul>
<li><a href="#">Item 1</a></li>
</ul>
</li>
</ul>
<p></p>
</div>
<div class="content">
<p></p>
CONTENT GOES HERE.
</div>
</body>
</html>
这是 CSS 文档:
@charset "utf-8";
.body{
font-family:Georgia, "Times New Roman", Times, serif;
font-size:14px;
}
#signature{
font-family:Arial, Helvetica, sans-serif;
font-size:7px;
padding: 7px;
color:#B8B8E6;
}
.menu{
margin-left:auto; margin-right: auto; padding:0; margin:8px; color: #000000; width:100%; border:1px; clear:both; text-align: center;
}
.menu ul {list-style:none; margin:100; padding:0;
position:center; text-align:center;
text-align: center;
}
.menu li {float:left; width:100px;
background-color:#444444;
text-align:center;
border-right:1px solid white; position:relative;
height:30px;
line-height:30px;
text-align: center;}
.menu li ul li {float:none; width:150px; text-align:left; padding-left:10px;
border-top:1px solid white;}
.menu a {text-decoration:none; color:white;}
.menu li ul {position:center; top:30px; left:0; visibility:hidden;}
.menu li:hover ul {visibility:visible;}
.menu li:hover {background-color:black;}
.content {clear:both;}
我正在尝试使用 CSS 使实际的菜单栏居中，但我似乎无法找出它不起作用的原因。这里有人可以帮助我吗？
最佳答案
删除位置:中心。此外，您需要将以下内容添加到 .menu ul
display:inline-block;
margin-left:auto;
margin-right:auto;
这是一个fiddle显示它。
关于html - 为什么我的 CSS 下拉菜单不居中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19599342/