我正在学习 css,但我不知道菜单和子菜单居中。
我正在使用 margin: auto 或 margin-left 和 margin-right 为 auto 但它不起作用。
任何帮助,将不胜感激。
谢谢
HTML
<div id="menu">
<ul id="nav">
<li><a href="#">item1</a>
<ul>
<li><a href="">subitem1</a></li>
<li><a href="">subitem2</a></li>
<li><a href="">subitem3</a></li>
</ul>
</li>
<li><a href="#">item2</a>
<ul>
<li><a href="">subitem1</a></li>
<li><a href="">subitem2</a></li>
<li><a href="">subitem3</a></li>
<li><a href="">subitem4</a></li>
<li><a href="">subitem5</a></li>
<li><a href="">subitem6</a></li>
</ul>
</li>
</ul>
</div>
CSS
#menu {
clear: none;
width: 960px;
}
ul#nav {
width: 960px;
margin: 0;
padding: 0;
list-style: none;
}
ul#nav li {
float: left;
display: inline-block;
}
ul#nav li a {
line-height: 40px;
padding: 0 30px;
text-align: center;
}
ul#nav ul {
display: none;
}
ul#nav li:hover > ul {
position: absolute;
display: block;
margin: auto;
width: 100%;
}
fiddle http://jsfiddle.net/davidgonzalo/ZzaDY http://jsfiddle.net/davidgonzalo/ZzaDY
这是你想要的结果吗?http://jsfiddle.net/shaunp/ZzaDY/1/ http://jsfiddle.net/shaunp/ZzaDY/1/
(请记住,小提琴窗口很小,因此您可能有一个滚动条 - 内容确实居中)
- Add
text-align:center;
to ul#nav
- 摆脱
float: left;
from ul#nav li
- 摆脱
position:absolute;
from ul#nav li:hover > ul
CSS
#menu {
clear: none;
width: 960px;
}
ul#nav {
width: 960px;
margin: 0;
padding: 0;
list-style: none;
text-align:center;
}
ul#nav li {
display: inline-block;
}
ul#nav li a {
line-height: 40px;
padding: 0 30px;
}
ul#nav ul {
display: none;
}
ul#nav li:hover > ul {
display: block;
margin: auto;
width: 100%;
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)