Question

我正在尝试将导航栏放在我的页面中心，导航栏的边缘将在整个浏览器窗口中移动。我无法弄清楚这一点。我认为这与浮动有关：左侧是各个导航项目。我希望这个导航栏在整个浏览器窗口中是橙色背景，但实际的导航项目将在页面上居中。我已经复制了下面的代码和下面的工作演示。

    <div id="nav-wrapper">
    <div id="navmenu">

    <ul class="nav" >
    <li><a href="#">About</a>
    <ul>
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
    <li><a href="#">Link 3</a></li>

    </ul>
    </li>
    <li><a href="#">Members & Groups</a>
    <ul>
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
    <li><a href="#">Link 3</a></li>

    </ul>
    </li>
    <li><a href="#">Meetings & Events</a>
    <ul>
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
    <li><a href="#">Link 3</a></li>

    </ul>
    </li>

    </ul>

    <!-- hp navigation end -->
    </div>
    </div>

    #nav-wrapper {

        width:100%; 
        background: #ff6633;
      margin 0 auto;
    }



      #navmenu{

            margin 0 auto;
            width:100%;


    }


    #navmenu ul  {
        list-style-type: none;

        padding: 0;
    }




    .nav li > a {
       background: #ff6633;
        color: white;
        width: 137px;

    }



    .nav > li > a {
        display: block;
        height: 100%;
        padding: 0px;
        color: #000000;
        text-decoration: none;
        text-align: center;
        line-height: 32px;
        outline: none;
          border-right: 1px solid #D6D3D3;

    }

    .nav > li:hover > a {
        color:#333;


    }


    .nav > li {
        padding: 0;
        height: 30px;
        font-family:   Arial, Helvetica, sans-serif;
        letter-spacing: -0.5px;
        font-size: 14px;

    }

    .nav li {

      float: left;
    }


    .nav li > ul {
        position: absolute;
        display: none;
        border-bottom: 0;
        width: 220px;
        z-index: 9999;
    }



    .nav li > ul > li > a {
        text-decoration: none;
        color: #0f2992;
        display: block;
        padding:5px 3px 5px 10px;
        text-indent:-7px;
    }


    .nav li:hover > ul {
        display: block;
    }

http://codepen.io/trevoray/pen/KwJPLO

Answer 1

#navmenu{

            margin 0 auto;
            width:100%;


    }


    #navmenu ul  {
        list-style-type: none;

        padding: 0;
    text-align:center
    }




    .nav li > a {
       background: #ff6633;
        color: white;
        width: 137px;

    }

.nav li > ul > li {
  width:100%;display:inline-block
  }

    .nav > li > a {
        display: block;
        height: 100%;
        padding: 0px;
        color: #000000;
        text-decoration: none;
        text-align: center;
        line-height: 32px;
        outline: none;
          border-right: 1px solid #D6D3D3;
      width:100%;

    }

    .nav > li:hover > a {
        color:#333;


    }


    .nav > li {
        padding: 0;
        height: 30px;
        font-family:   Arial, Helvetica, sans-serif;
        letter-spacing: -0.5px;
        font-size: 14px;
 position: relative;
      width: 32%;
    }

    .nav li {

     display:inline-block
    }


    .nav li > ul {
        position: absolute;
        display: none;
        border-bottom: 0;
        width: 100%;
        z-index: 9999;
      list-style:none;
       text-align: left !important;
    }



    .nav li > ul > li > a {
        text-decoration: none;
        color: #0f2992;
        display: block;
        padding:5px 3px 5px 10px;
        text-indent:-7px;
      width:100%;
       box-sizing: border-box;
    }


    .nav li:hover > ul {
        display: block;
    }

<div id="nav-wrapper">
<div id="navmenu">

<ul class="nav" >
<li><a href="#">About</a>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
 
</ul>
</li>
<li><a href="#">Members & Groups</a>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
 
</ul>
</li>
<li><a href="#">Meetings & Events</a>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
 
</ul>
</li>
 
</ul>

<!-- hp navigation end -->
</div>
</div>

try this :http://jsfiddle.net/au07b2r3/3/
i remove float left from li ..and set display : inline-block

无法在页面上居中显示导航栏

1 个答案: