0

下面是我的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 的新手，所以我很难让导航栏在页面中居中。中心我的意思是实际的列表项在页面中居中，而不是像现在这样在左侧。非常感谢任何帮助谢谢！

4

3 回答 3

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

于 2013-02-20T07:32:17.373 回答
1

你需要添加width和margin自动到你navbar我做了一个小 jsFiddle

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

jsFiddle

于 2013-02-20T07:35:51.050 回答
0 
.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;
}
于 2013-02-20T07:31:40.103 回答