需要一些帮助。我刚开始学习 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
无论如何要在屏幕中央获得菜单栏。
旁注::此网站上是否有剧透标签?
最佳答案
尝试使用 display: inline-block
和 text-align: center
.
设置display: inline-block
对于 <ul>
和 text-align: center
用于容器 #navMenu
.设置text-align: left
对于 #navMenu li
修复子菜单。
还有
#navMenu{
margin:0;
padding:0;
text-align: center;
}
#navMenu ul{
margin:0;
padding:0;
line-height:30px;
display: inline-block;
}
#navMenu li{
margin:0;
padding:0;
text-align: left;
float: left;
list-style:none;
position: relative;
background-color: #999;
border-radius: 5px;
}
关于网页 |屏幕中央菜单栏,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22493349/