Question

我正在使用水平下拉导航栏，并且栏本身位于站点左侧站点的中心位置，但我希望它在整个页面中居中。我怎样才能把它带到正中心？这是我的css / html代码：

#wrapper {
    width: 80%;
    max-height:10500;
    margin-left:auto;
    margin-right:auto;
    background-color:#FFF;
}
#navMenu {
    margin:0;
    padding:0;
}
#navMenu ul {
    margin:0;
    padding:0;
    line-height:27px;
}

#navMenu li {
    margin:0;
    padding:0;
    list-style:none;
    float:left;
    position:relative;
    background-color:#000;
}

#navMenu li a {
    text-align:center;
    font-family:"futura condensed medium", futura, arial;
    text-decoration:none;
    height:30px;
    width:150px;
    display:block;
    color:#fff;
    border:1px solid #FFF;
}

#navMenu ul ul {
    position:absolute;
    visibility:hidden;
    top:30px;
}

#navMenu ul li:hover ul {
    visibility:visible;
}

#navMenu li:hover {
    background:#F66;
}

#navMenu ul li:hover ul li a:hover {
    background:#b24747;
}

#navMenu a:hover {
    color:#000;
}

.clearFloat {
    clear:both;
    margin:0;
    padding:0;
}

<div id="wrapper">
<div id="navMenu">

<ul>
<li><a href="#">D4G</a>
  <ul>
<li><a href="#">Hotels</a></li>
<li><a href="#">Hotels</a></li>
<li><a href="#">Hotels</a></li>
<li><a href="#">Hotels</a></li>


</ul> <!--end inner UL div-->

</li> <!--end main LI div-->
</ul> <!--end main UL div-->

<ul>
<li><a href="#">EVENTS</a>
  <ul>
<li><a href="#">Hotels</a></li>
<li><a href="#">Hotels</a></li>
<li><a href="#">Hotels</a></li>
<li><a href="#">Hotels</a></li>


</ul> <!--end inner UL div-->

</li> <!--end main LI div-->
</ul> <!--end main UL div-->

<ul>
<li><a href="#">SIGN ME UP</a>
  <ul>
<li><a href="#">Hotels</a></li>
<li><a href="#">Hotels</a></li>
<li><a href="#">Hotels</a></li>
<li><a href="#">Hotels</a></li>


</ul> <!--end inner UL div-->

</li> <!--end main LI div-->
</ul> <!--end main UL div-->

<ul>
<li><a href="#">CONTACT</a>
  <ul>
<li><a href="#">Hotels</a></li>
<li><a href="#">Hotels</a></li>
<li><a href="#">Hotels</a></li>
<li><a href="#">Hotels</a></li>


</ul> <!--end inner UL div-->

</li> <!--end main LI div-->
</ul> <!--end main UL div-->
<br class="clearFloat"/>

</div> <!--end navMenu div-->
</div>

Answer 1

这是你在寻找什么？

#navMenu {
    width: 200px;
    margin : 0 auto;
    padding : 0;
    line-height : 27px;
}

Answer 2

我认为这就是你想要的。：）

我在这里将变更演示放在网上：编辑小提琴 - JSFiddle http://goo.gl/9o8hOK

注意：我已标记（+）加号更改的内容。

#navMenu {
    margin:0;
    padding:0;
  + text-align: center;
}
#navMenu ul {
  + text-align: left;
    margin:0;
    padding:0;
    line-height:27px;
  + display: inline-block;
}

享受并祝你好运：）

Answer 3

一种解决方案是从float: left元素中删除li，并将display: inline-block添加到ul和li元素，并将text-align: center添加到主包装器#navMenu：

#wrapper {
    max-height:10500;
    margin-left:auto;
    margin-right:auto;
    background-color:#FFF;
}
#navMenu {
    margin:0;
    padding:0;
    text-align: center;
}
#navMenu ul {
    margin:0;
    padding:0;
    line-height:27px;
    display: inline-block;/*add display inline block*/
}
#navMenu li {
    margin:0;
    padding:0;
    list-style:none;
    display: inline-block;/*add display inline block*/
    position:relative;
    background-color:#000;
}
#navMenu li a {
    text-align:center;
    font-family:"futura condensed medium", futura, arial;
    text-decoration:none;
    height:30px;
    width:150px;
    display:block;
    color:#fff;
    border:1px solid #FFF;
}
#navMenu ul ul {
    position:absolute;
    visibility:hidden;
    top:30px;
    left: 0;/*add left 0 to align properly*/
}
#navMenu ul li:hover ul {
    visibility:visible;
}
#navMenu li:hover {
    background:#F66;
}
#navMenu ul li:hover ul li a:hover {
    background:#b24747;
}
#navMenu a:hover {
    color:#000;
}
.clearFloat {
    clear:both;
    margin:0;
    padding:0;
}

<div id="wrapper">
  <div id="navMenu">
    <ul>
      <li><a href="#">D4G</a>

        <ul>
          <li><a href="#">Hotels</a>
          </li>
          <li><a href="#">Hotels</a>
          </li>
          <li><a href="#">Hotels</a>
          </li>
          <li><a href="#">Hotels</a>
          </li>
        </ul>
        <!--end inner UL div-->
      </li>
      <!--end main LI div-->
    </ul>
    <!--end main UL div-->
    <ul>
      <li><a href="#">EVENTS</a>

        <ul>
          <li><a href="#">Hotels</a>
          </li>
          <li><a href="#">Hotels</a>
          </li>
          <li><a href="#">Hotels</a>
          </li>
          <li><a href="#">Hotels</a>
          </li>
        </ul>
        <!--end inner UL div-->
      </li>
      <!--end main LI div-->
    </ul>
    <!--end main UL div-->
    <ul>
      <li><a href="#">SIGN ME UP</a>

        <ul>
          <li><a href="#">Hotels</a>
          </li>
          <li><a href="#">Hotels</a>
          </li>
          <li><a href="#">Hotels</a>
          </li>
          <li><a href="#">Hotels</a>
          </li>
        </ul>
        <!--end inner UL div-->
      </li>
      <!--end main LI div-->
    </ul>
    <!--end main UL div-->
    <ul>
      <li><a href="#">CONTACT</a>

        <ul>
          <li><a href="#">Hotels</a>
          </li>
          <li><a href="#">Hotels</a>
          </li>
          <li><a href="#">Hotels</a>
          </li>
          <li><a href="#">Hotels</a>
          </li>
        </ul>
        <!--end inner UL div-->
      </li>
      <!--end main LI div-->
    </ul>
    <!--end main UL div-->
    <br class="clearFloat" />
  </div>
  <!--end navMenu div-->
</div>

修正：Add left: 0到#navMenu ul ul子菜单正确对齐。

我的导航为什么不下拉页面上的菜单中心？

3 个答案: