拜托，我需要一些帮助。 如何将导航栏中的项目水平居中？ 我已经尝试了所有知识，但无法获得理想的结果。
http://codepen.io/vichid/pen/cHnmK
HTML：
<nav>
<ul class="menu">
<li>
<a href="#">Item 1</a>
<ul class="sub-menu">
<li><a href="#">Sub-item 1</a></li>
<li><a href="#">Sub-item 2</a></li>
<li><a href="#">Sub-item 3</a></li>
<li><a href="#">Sub-item 4</a></li>
<li><a href="#">Sub-item 5</a></li>
<li><a href="#">Sub-item 6</a></li>
<li><a href="#">Sub-item 7</a></li>
</ul>
</li>
<li>
<a href="#">Item 2</a>
<ul class="sub-menu">
<li><a href="#">Sub-item 1</a></li>
<li><a href="#">Sub-item 2</a></li>
<li><a href="#">Sub-item 3</a></li>
<li><a href="#">Sub-item 4</a></li>
<li><a href="#">Sub-item 5</a></li>
<li><a href="#">Sub-item 6</a></li>
<li><a href="#">Sub-item 7</a></li>
</ul>
</li>
<li>
<a href="#">Item 3</a>
<ul class="sub-menu">
<li><a href="#">Sub-item 1</a></li>
<li><a href="#">Sub-item 2</a></li>
<li><a href="#">Sub-item 3</a></li>
<li><a href="#">Sub-item 4</a></li>
<li><a href="#">Sub-item 5</a></li>
<li><a href="#">Sub-item 6</a></li>
<li><a href="#">Sub-item 7</a></li>
</ul>
</li>
<li>
<a href="#">Item 4</a>
<ul class="sub-menu">
<li><a href="#">Sub-item 1</a></li>
<li><a href="#">Sub-item 2</a></li>
<li><a href="#">Sub-item 3</a></li>
<li><a href="#">Sub-item 4</a></li>
<li><a href="#">Sub-item 5</a></li>
<li><a href="#">Sub-item 6</a></li>
<li><a href="#">Sub-item 7</a></li>
</ul>
</li>
<li>
<a href="#">Item 5</a>
<ul class="sub-menu">
<li><a href="#">Sub-item 1</a></li>
<li><a href="#">Sub-item 2</a></li>
<li><a href="#">Sub-item 3</a></li>
<li><a href="#">Sub-item 4</a></li>
<li><a href="#">Sub-item 5</a></li>
<li><a href="#">Sub-item 6</a></li>
<li><a href="#">Sub-item 7</a></li>
</ul>
</li>
<li>
<a href="#">Item 6</a>
<ul class="sub-menu">
<li><a href="#">Sub-item 1</a></li>
<li><a href="#">Sub-item 2</a></li>
<li><a href="#">Sub-item 3</a></li>
<li><a href="#">Sub-item 4</a></li>
<li><a href="#">Sub-item 5</a></li>
<li><a href="#">Sub-item 6</a></li>
<li><a href="#">Sub-item 7</a></li>
</ul>
</li>
<li>
<a href="#">Item 7</a>
<ul class="sub-menu">
<li><a href="#">Sub-item 1</a></li>
<li><a href="#">Sub-item 2</a></li>
<li><a href="#">Sub-item 3</a></li>
<li><a href="#">Sub-item 4</a></li>
<li><a href="#">Sub-item 5</a></li>
<li><a href="#">Sub-item 6</a></li>
<li><a href="#">Sub-item 7</a></li>
</ul>
</li>
</ul>
</nav>
CSS:
@import "compass/css3";
// Parameters
$menuColor:#AFF8C4;
$subMenuColor:#9CE0C9;
$fontColor: #0E0500;
$menuWidth:940px;
$backgroundColor:#FFFCF6;
$borderRadius:4px;
$duration:0.33s;
body{
background-color:$backgroundColor;
}
nav {
position: absolute;
top: 50%; left: 0; bottom: 50%; right: 0;
}
ul.menu{
width: $menuWidth;
height: 40px;
line-height: 40px;
position: relative;
text-align: center;
margin: auto;
padding: auto;
background-color:$menuColor;
@include border-top-radius($borderRadius);
li{
float: left;
width: auto;
a{
display: block;
width: auto;
text-decoration: none;
}
}
li:hover
{
background-color:$subMenuColor;
@include transition-property(background-color);
@include transition-duration($duration);
@include border-top-radius($borderRadius);
ul{
width: $menuWidth;
background: $subMenuColor;
visibility: visible;
@include opacity(1);
@include transition-property(opacity);
@include transition-duration($duration);
@include border-bottom-radius($borderRadius);
}
}
}
ul.sub-menu{
@include opacity(0);
visibility: hidden;
display:block;
position: absolute;
left: 0;
height: 40px;
line-height: 40px;
background-color:$subMenuColor;
li:hover{
@include border-bottom-radius($borderRadius);
}
}
ul.menu,
ul.sub-menu{
a{
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color:$fontColor;
padding: 0 10px;
}
}
提前致谢！
答案 0 :(得分：0)
移除li标记中的浮动内容。使用list-style和display获取所需的显示。
li{
list-style: none;
display: inline-block;
width: auto;
a{
display: block;
width: auto;
text-decoration: none;
}
}