我有一个使用以下CSS的CSS菜单。
什么是将整个菜单居中在页面上的最佳方法?
我尝试使用另一个位于
什么是将整个菜单居中在页面上的最佳方法?
我尝试使用另一个位于
nav {
margin: 0 auto;
text-align: center;
border:1px solid black;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul {
list-style: none;
margin: 0; /* << add this */
padding: 0; /* << add this */
display: inline-block; /* << add this */
vertical-align: top; /* << add this */
}
nav ul li {
float: left;
margin: 0; /* << add this */
padding: 0; /* << add this */
}
nav ul li:hover a {
color: #000000;
}
nav ul li a {
display: block;
padding: 10px 15px;
color: #000000;
text-decoration: none;
background-color: pink; /* optional... */
}
nav ul ul {
border-radius: 0px;
padding: 0;
position: absolute;
}
nav ul ul li {
float: none;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
position: relative;
}
nav ul ul li a {
color: #000000;
}
nav ul ul li a:hover {
color: #666666;
}
nav ul ul ul {
position: absolute;
top:0;
}
nav ul
设置为display: inline-block
,这样您的text-align: center
规则就会生效。ul
和li
元素的边距和填充设置为零。其他你所做的事情基本上是正确的,所以你应该没问题。不要浮动 li
,而是将它们显示为 inline-block
。
然后,由于 text-align: center
,它们将相对于 ul
居中显示。
由于默认情况下 ul
与 nav
一样宽,因此 li
看起来像相对于 nav
居中显示。
nav {
text-align: center;
border: 1px solid black;
}
nav ul {
list-style: none;
padding: 0;
margin: 0;
}
nav > ul > li {
display: inline-block;
}
nav a {
display: block;
padding: 10px 15px;
color: #000000;
text-decoration: none;
}
nav li:hover > ul {
display: block;
}
nav > ul ul {
display: none;
position: absolute;
}
nav > ul ul > li {
border-bottom: 1px solid #000000;
}
nav > ul ul a:hover {
color: #666666;
}
<nav>
<ul>
<li><a href="/add_contact.php">Add Contact</a></li>
<li><a href="/view_contact.php">View Contact</a></li>
<li><a href="/tickets.php">Tickets</a>
<ul>
<li><a>TEST1</a></li>
<li><a>TEST2</a></li>
</ul>
</li>
<li><a href="/invoices.php">Invoices</a></li>
<li><a href="/itemised_calls.php">Itemised Calls</a></li>
</ul>
</nav>
ul
时,必须通过添加 clear
div 来清除浮动:
HTML:
<div class="clear"></div>
CSS:
.clear{
clear:both;
}
而要使菜单居中,您应该像示例中一样指定 ul
的宽度,我随机将宽度设置为 560px
:
nav ul {
list-style: none;
width : 560px;
margin: 0 auto;
}
看一下: