Question

以下是我的HTML

    <div id="wrap">


<ul class="navbar">
      <li><a href="">Home</a></li>
      <li><a href="">Franchises</a>
        <ul>
        <li><a href="">elroyz Xpress</a></li>
        <li><a href="">skye stickbeetles</a></li>
        <li><a href="">Juddamania</a></li>
        </ul>
      </li>
      <li><a href="">Fixtures</a>
        <ul>
        <li><a href="">Round 1</a></li>
        <li><a href="">Round 2</a></li>
        <li><a href="">Round 3</a></li>
        <li><a href="">Round 4</a></li>
        <li><a href="">Round 5</a></li>
        </ul>
      </li>
      <li><a href="">Free Agents</a>
        <ul>
        <li><a href="">Adelaide</a></li>
        <li><a href="">Brisbane</a></li>
        <li><a href="">Carlton</a></li>
        </ul>
      </li>
</ul>
 </div>

下面是我的CSS

    #wrap {
    width:100%;
    height: 37px;
    margin: 0;
    z-index:99;
    position:relative;
    background-color:#F00;}

.navbar {
    height: 35px;
    padding:0;
    margin: 0;
    position:absolute;
    border-right: 1px solid #1c1c1c;
}

    .navbar li  {
            height: auto;
            width: 150px;  
            float: left;  
            text-align: center;  
            list-style: none;  
            font: normal bold 14px/1.2em Arial, Verdana, Helvetica;  
            padding: 0;
            margin: 0;
            background-color: #F00
                        }

.navbar a   {                           
        padding: 10px 0;
        border-left: 1px solid #1c1c1c;
        border-right: 1px solid #1c1c1c; 
        text-decoration: none;
        color: white;
        display: block;
        }

 .navbar li:hover, a:hover {background-color: #a4a4a4;} 

.navbar li ul   {
        display: none;
        height: auto;                                   
        margin: 0; 
        padding: 0;         
        }               

.navbar li:hover ul     {
                        display: block;
                        }

.navbar li ul li {background-color: #a4a4a4;}

.navbar li ul li a  {
        border-left: 1px solid #1c1c1c; 
        border-right: 1px solid #1c1c1c; 
        border-top: 1px solid #1c1c1c; 
        border-bottom: 1px solid #1c1c1c; 
        }

.navbar li ul li a:hover    {background-color: #1c1c1c;}

我只是html和css的新手，所以我很难让导航栏在页面中心。按中心我的意思是页面中心的实际列表项目不像现在那样在左侧。非常感谢任何帮助谢谢！

Answer 1

你必须将换行宽度设置为像这样的像素

#wrap {
width:750px; // Set it according to your need
margin: 0px auto;  // i also changed this
height: 37px;
z-index:99;
position:relative;
background-color:#F00;}

以及0px auto

的边距

以下是JSfiddle

Answer 2

您需要将width和margin自动添加到navbar我做了一点jsFiddle

.navbar {
    height: 35px;
    width:610px;
    margin:0 auto;
}

jsFiddle

Answer 3

.navbar {
    height: 35px;
    padding:0;
    position:relative;
    margin-left:auto;
    margin-right:auto;
    width: 100px;// change this to desired width
    border-right: 1px solid #1c1c1c;
}

为什么我不能让导航栏在页面中心？

3 个答案: