我在div中有一个简单的菜单栏,我可以将div居中,但我想将菜单栏置于div中心.
这是代码：
CSS：
* {
margin: 0px;
padding: 0px;
}
.menu {
height: 35px;
width: auto;
background: url("../img/slash-layer.png") repeat scroll 0% 0% rgb(130,28,107);
border-radius: 15px;
padding-top: 10px;
}
ul#navmenu,ul.sub1,ul.sub2 {
list-style-type: none;
font-size: 9pt;
max-width: 660px;
margin: 0 auto;
}
ul#navmenu li {
width: 125px;
text-align: center;
position: relative;
float: left;
margin-right: 4px;
}
ul#navmenu a {
text-decoration: none;
display: block;
width: 125px;
height: 25px;
line-height: 25px;
background-color: #FFF;
border: 1px solid #CCC;
border-radius: 10px;
}
ul#navmenu .sub1 li {
}
ul#navmenu .sub1 a {
margin-top: 5px;
}
ul#navmenu .sub2 a {
margin-left: 3px;
}
ul#navmenu li:hover > a {
background-color: #CFC;
}
ul#navmenu li:hover a:hover {
background-color: #FF0;
}
ul#navmenu ul.sub1 {
display: none;
position: absolute;
top: 26px;
left: 0px;
}
ul#navmenu ul.sub2 {
display: none;
position: absolute;
top: 0px;
left: 126px;
}
ul#navmenu li:hover .sub1 {
display: block;
}
ul#navmenu .sub1 li:hover .sub2 {
display: block;
}
.darrow {
font-size: 11pt;
position: absolute;
top: 5px;
right: 4px;
}
.rarrow {
font-size: 13pt;
position: absolute;
top: 6px;
right: 4px;
}
HTML：
<html>
<head>
<title><?PHP echo $title; ?></title>
<link rel="stylesheet" type="text/css" href="recursos/css/main.css">
<Meta charset="utf-8">
<div class="logo"></div>
<div class="menu">
<ul id="navmenu">
<li><a href="#">Home</a></li>
<li><a href="#">Novedades</a></li>
<li><a href="#">Categorías <span class="darrow">▼</span></a>
<ul class="sub1">
<li><a href="#">Acción</a></li>
<li><a href="#">Aventuras</a></li>
</ul></li>
<li><a href="#">Profile <span class="darrow">▼</span></a>
<ul class="sub1">
<li><a href="#">Menu 4.1</a></li>
<li><a href="#">Menu 4.2 <span class="rarrow">▶</span></a>
<ul class="sub2">
<li><a href="#">Menu 4.2.1</a></li>
<li><a href="#">Menu 4.2.2</a></li>
</ul></li>
</ul></li>
</ul>
</div>
</head>
<body>
我试着把
ul#navmenu {
display: block
}
但它不起作用,我不明白…因为我可以把div放在中心…
我怎么能这样做？
解决方法
首先,请注意您应该将元素放在< body>中.标签.
实际上,ul元素在中心对齐(见demo here).但重点是列表项目浮动到左侧.
有两个选项：
>对< ul>使用适当的固定宽度(或最大宽度)元件. Working Demo
>或者使用display：inline-block而不是float：left表示列表项,使用text-align：center表示ul水平对齐内联元素. Working Demo.
但请注意,内联(-block)元素之间存在空白,这绝对是内联流中内联元素的正常行为.您可以参考my answer here来解决这个问题.
