我完成这段代码是为了进行一些额外的研究，但我似乎无法集中精力进行工作，而且我不确定我是否需要这么多代码感觉应该删除一些代码，请帮忙!
如果需要删除某些代码，我理解只是不太理解，我觉得我阅读的所有内容都让我更加迷茫，只是继续更改我的代码而没有解决方案:(
#menubar{
background:#3399CC;
height:120px;
}
#menubarwrap {
margin:0 auto;
width:100%;
}
#navigationbar-main {
float:left;
padding:15px;
color:#000;
font-size:24px;
font-weight:bold;
list-style-type: none;
margin-bottom:10px;
text-align:center;
}
#navigationbar-main li {
margin-right:35px;
position:relative;
}
#navigationbar-main li a {
display:block;
color:#000;
}
#navigationbar-main li ul {
display:none;
z-index:80;
}
.nav-sec {
display:block;
font-size:12px;
font-family: lucida sans unicode;
font-weight:normal;
text-align:center;
}
HTML
<body>
<div id="menubar">
<div id="menubarwrap">
<ul id="navigationbar-main">
<li><a href="">Home</a><span class="nav-sec">Where We Start</span></li>
<li><a href="">Gallery</a><span class="nav-sec">Pure Beauty</span></li>
<li><a href="">Contact</a><span class="nav-sec">Come Book</span></li>
<li><a href="">Features</a><span class="nav-sec">Pure Luxury</span></li>
<li><a href="">Location</a><span class="nav-sec">Where Are We?</span></li>
<li><a href="">Rates</a><span class="nav-sec">Price Of Love</span></li>
</ul>
</div>
</div>
</body>
抱歉，我对这一切还很陌生
最佳答案
我提供了两种解决方案来猜测您需要什么:
Fiddle 1
改变
#navigationbar-main {
margin:0px auto;
/*removed float
Other styles remain same*/
}
Fiddle 2
改变
#navigationbar-main li {
display:inline-block;
/*Other styles remain same*/
}
关于html - 似乎无法使我的菜单居中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22524339/