Question

我已经完成了这个代码以进行一些额外的学习，但我似乎无法集中精力工作，我不确定我是否需要这么多代码，感觉有些应该删除，请帮忙！

如果某些代码需要被删除，我理解就是不太明白，我觉得我读的所有东西都让我更加迷失，只是不断改变我的代码：（

#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>

抱歉，我对这一切只是相当新的

Answer 1

我提供两种解决方案来猜测你需要什么：

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*/ }

Answer 2

更改您的ul css

 #navigationbar-main {
color: #000000;
font-size: 24px;
font-weight: bold;
list-style-type: none;
margin: 0 auto 10px;
padding: 15px;
text-align: center;
width: 1000px;
}

并给予平坦：留给你的嘴唇>

Answer 3

如果您尝试将#navigationbar-main ul居中对齐，请执行此操作

#navigationbar-main ul{
    float:left /*remove this line*/
}

这会让ul水平到达页面中心如果您想水平对齐li项目，请执行以下操作：

#navigationbar-main li {
    display:inline-block;
}

Answer 4

#navigationbar-main {
   width: 100%;
}

将此添加到您的CSS

似乎无法集中我的菜单

4 个答案:

Fiddle 1

Fiddle 2