Question

需要一些帮助。我只是在学习HTML，并且一直在研究今天如何做菜单，同时这样做我遇到了一个问题。

我似乎无法弄清楚如何将菜单置于屏幕中心。

这是我到目前为止所拥有的;

<div id="navMenu">
    <ul>
        <li><a href="#">Home</a></li>

        <li><a href="#">WWW.</a>
        <ul>
            <li><a href="#">Through the years</a></li>
        </ul></li>

        <li><a href="#">Browsers</a>
        <ul>
            <li><a href="#">IE</a></li>
            <li><a href="#">Firefox</a></li>
            <li><a href="#">Chrome</a></li>
        </ul></li>

        <li><a href="#">CSS</a>
        <ul>
            <li><a href="#">CSS 2.1</a></li>
            <li><a href="#">CSS 3</a></li>
        </ul></li>

        <li><a href="#">Scripting</a>
        <ul>
            <li><a href="#">JavaScripts</a></li>
            <li><a href="#">jQuery</a></li>
        </ul></li>

    </ul>
</div>

当前的CSS;

#navMenu{
    margin:0;
    padding:0;
}
#navMenu ul{
    margin:0;
    padding:0;
    line-height:30px;
}
#navMenu li{
    margin:0;
    padding:0;
    list-style:none;
    float: left;
    position: relative;

    background-color: #999;
    border-radius: 5px;
}
#navMenu ul li a{
    text-align: center;
    text-decoration:none;
    height:30px;
    width:150px;
    display:block;
    color: #FFF;
    border: 1px solid #FFF;
    text-shadow: 1px 1px 1px #000;
}
#navMenu ul ul{
    position:absolute;
    visibility:hidden;
    top:32px;
}
#navMenu ul li:hover ul{
    visibility:visible;
}
#navMenu li:hover{
    background-color: #09F;
}
#navMenu ul li:hover ul li a:hover{
    background-color: #CCC;
    color: #000;
}
#navMenu a:hover{
    color:#000;
}

以上产生了这个.... http://gyazo.com/55cf62d121ef16eb1248e5246d0accae

无论如何要将菜单栏放在屏幕中央。

SIDE NOTE ::本网站上的任何剧透标签？

Answer 1

尝试使用display: inline-block和text-align: center。

为容器display: inline-block设置<ul>和text-align: center的{{1}}。为#navMenu设置text-align: left以修复子菜单。

另外

<强> Example

#navMenu li

Answer 2

为菜单包装器添加宽度，并向左和向右赋予自动边距您可以根据要将导航定位在中心的位置来调整宽度。

#navMenu {
width: 960px;
margin:0 auto;
padding:0;
text-align: center;

}

不需要ul和li中的边距和填充。

#navMenu ul{
list-style: none;
line-height:30px;
display: inline-block;
text-align: center;

}

#navMenu li{
display: inline;

}

填充应该在这里保持所有链接均匀。

  #navMenu li a {
  display: block;
  padding: 10px;

}

HTML |中心菜单栏在屏幕上

2 个答案: