我有一个使用以下CSS的CSS菜单。
将整个菜单置于页面中心的最佳方法是什么?
我已尝试在<div>
之外使用其他<nav>
并设置边距,但它只是一直向左对齐。
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;
}
nav ul li {
float: left;
}
nav ul li:hover a {
color: #000000;
}
nav ul li a {
display: block;
padding: 10px 15px;
color: #000000;
text-decoration: none;
}
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;
}
jsfiddle:http://jsfiddle.net/njuVm/
答案 0 :(得分:2)
您可以使用以下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;
}
请参阅演示:http://jsfiddle.net/audetwebdesign/DP6Ax/
关键是为display: inline-block
设置nav ul
,这将使您的text-align: center
规则生效。
确保将ul
和li
元素上的边距和填充清零。你所做的其他事情或多或少是正确的,所以你应该做得很好。
答案 1 :(得分:0)
您可以将其显示为public class Item {
public String name;
public String billingIdentifier;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getBillingIdentifier() {
return billingIdentifier;
}
public void setBillingIdentifier(String billingIdentifier) {
this.billingIdentifier = billingIdentifier;
}
}
s。
li
然后,由于inline-block
,它们将相对于ul
居中。
由于text-align: center
默认与ul
一样宽,nav
看起来会相对于li
居中。
nav
&#13;
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;
}
&#13;
答案 2 :(得分:-1)
首先,当您浮动ul
时,您必须通过添加clear
div清除浮动:
HTML:
<div class="clear"></div>
CSS:
.clear{
clear:both;
}
为了使菜单居中,你应该指定ul
的宽度,如下例所示,随机我将宽度设置为560px
:
nav ul {
list-style: none;
width : 560px;
margin: 0 auto;
}
看看: