如何居中我的CSS菜单？ [英] How to centre my CSS menu?
本文介绍了如何居中我的CSS菜单？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
第一次发布的工作代码获得答案...
First posted working code gets awarded the answer...
这是一个简单的网页与CSS下拉菜单
Here's a simple web-page with a CSS drop-down menu
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Center menu test</title>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<link type="text/css" rel="stylesheet" href="css_menu.css">
</head>
<body>
<div class="menu">
<ul><li><a href="home.html">Home</a></li></ul>
<ul>
<li><a href="home.html">Menu with items</a>
<ul>
<li><a href="home.html#anchor_1">one</a></li>
<li><a href="home.html#anchor_2">two</a></li>
</ul>
</li>
</ul>
</div>
<div style="clear:both;"></div>
</body>
</html>
这里是相应的CSS：
.menu {margin-left:auto; margin-right: auto; padding:0; margin:8px; color: #000000; width:100%; border:1px; clear:both;}
/*Color navigation bar normal mode*/
.menu a,
.menu a:visited {font-family:Arial, Helvetica, sans-serif;font-style:normal;font-weight:bold;font-size:12px;color: #000000;background-color: #FFFFFF;text-decoration: none;}
.menu ul {list-style-type:none;padding:0; margin:0;}
.menu ul li {float:left; position:relative; z-index:auto !important /*Non-IE6*/; z-index:1000 /*IE6*/; margin-right: 4px; border:solid 1px #004080; }
.menu ul li a {color: #000000;background: #FFFFFF;float:none !important /*Non-IE6*/; float:left /*IE-6*/; display:block; height:30px; line-height:30px; padding:0 10px 0 10px; text-decoration:none; }
.menu ul li ul {display:none; border:none;color: #000000; background: #FFFFFF;}
.menu ul li:hover a {background-color:#d7f1ff; text-decoration:none; color:#000000;}
.menu ul li:hover ul {display:block; position:absolute; z-index:999; top:29px; margin-top:1px; left:0;}
.menu ul li:hover ul li a {display:block; width:12em; height:auto; line-height:1.3em; margin-left:-1px; padding:5px 10px 5px 10px; border-left:solid 1px #004080; border-bottom: solid 1px #004080; background-color:#FFFFFF; color:#000000;}
.menu ul li:hover ul li a:hover {background-color:#d7f1ff; text-decoration:none;color:#000000;}
.menu table {position:absolute; top:0; left:0; border-collapse:collapse;color: #000000;background: #FFFFFF;}
.menu ul li a:hover {background-color:#d7f1ff; text-decoration:none;color:#000000;}
.menu ul li a:hover ul {display:block; width:12em; position:absolute; z-index:999; top:29px; left:0; }
.menu ul li a:hover ul li a {display:block; width:12em; height:1px; line-height:1.3em; padding:4px 16px 4px 16px; border-left:solid 1px #004080; border-bottom: solid 1px #004080; background-color:#FFFFFF; color:#000000;}
.menu ul li a:hover ul li a:hover {background-color:#d7f1ff; text-decoration:none;color:#000000;}
第
推荐答案
其宽度为 100％ ，但不是以视觉为中心（如何将中心占据100％的宽度？）
Its width is 100%, so it is centered, but not centred visibly (how can you center something that takes up 100% of the width?).
通过查看这个小提琴。
Thirtydot 还指出， margin：8px 正在破坏您之前的设置 margin -left 和 margin-right 。
Thirtydot also points out that margin: 8px is clobbering your previous setting of margin-left and margin-right.
我建议您更改您的标记 - 每个单独的 ul 都会造成混乱。
I would recommend changing your markup - having each in a separate ul is confusing.
这篇关于如何居中我的CSS菜单？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
