1
我想将导航栏按钮居中，但出于某种原因，它们太靠右了。为什么是这样？？中心导航按钮
HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link href="css/mainStyle.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/jquery.js"></script>
<script language="javascript">
function start() {
hideAll();
$('#about').show();
}
function hideAll() {
$('#home').hide();
$('#contact').hide();
}
function slideAll() {
$('#home').slideUp();
$('#contact').slideUp();
}
$(document).ready(function() {
start();
});
</script>
</head>
<body>
<style type="text/css">
body {
background-color: #f3f3f3;
}
div.banner {
width: 800px;
height: 200px;
margin-left: auto;
margin-right: auto;
border: 1px solid black;
text-align: center;
background: white;
}
div.main {
width: 800px;
height: auto;
margin: 40px auto 50px auto;
background-color: white;
padding: 20px;
}
p {
font-family: Helvetica;
font-weight: 100;
text-indent: 0px;
margin-bottom: 40px;
}
div.heading {
font-size: large;
text-transform: uppercase;
font-family: Helvetica;
font-weight: bolder;
margin-bottom: 20px;
}
.answer {
font-family: Helvetica;
font-weight: 100;
margin-left: 60px;
}
p.question {
font-family: Helvetica;
margin: 0px 0px 0px 0px;
text-indent: -13px;
padding-left: 13px
}
#shadow {
-webkit-box-shadow: 0px 0px 4px #000000;
-moz-box-shadow: 0px 0px 4px #000000;
box-shadow: 0px 0px 4px #000000;
}
</style>
<div class="banner">
BANNER
</div>
<nav id="navcontainer">
<ul id="navlist">
<li id="button"><a onclick="hideAll(); $('#home').slideDown();" id="current">Home</a></li>
<li id="button"><a href="#">Past Summer Camps</a></li>
<li id="button"><a onclick="hideAll(); $('#contact').slideDown();">About Summer Camps</a></li>
<li id="button"><a href="#">Apply</a></li>
<li id="button"><a onclick="hideAll(); $('#contact').slideDown();">Contact</a></li>
<li id="button"><a href="#">Photo Gallery</a></li>
</ul>
</nav>
<div class="main" id="shadow">
</div>
<div id="about">
</div>
<div id="contact">
CONTACT
</div>
</div>
</body>
</html>
和CSS：
#navcontainer ul
{
list-style-type: none;
width: 100%;
margin-left: auto;
margin-right: auto;
text-align: center;
margin-top: 40px;
}
#button { display: inline; }
li a
{
text-decoration: none;
color: black;
padding: 8px;
margin-right: 30px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
background: #eeeeee; /* old browsers */
background: #eeeeee; /* old browsers */
background: -moz-linear-gradient(top, #eeeeee 0%, #A0A0A0 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(100%,#A0A0A0)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#A0A0A0',GradientType=0); /* ie */
-webkit-box-shadow: 0px 0px 3px #000000;
-moz-box-shadow: 0px 0px 3px #000000;
box-shadow: 0px 0px 3px #000000;
text-transform: uppercase;
font: 22px 'HomeRemedy', Arial, sans-serif;
font-size: 12px;
font-weight: bold;
}
li a:hover
{
background: #353535;
color: #fff;
}
我仍然不知道是什么问题，但它固定通过添加CSS重置代码： – 2011-03-29 00:50:46
如果有人看到原始问题，请告诉我。 – 2011-03-29 00:51:31