Question

对于这个主题有多少答案怎么可能，我仍然无法解决这个问题？我已经在jsfiddle上摆弄了几个小时的CSS，我仍然不明白为什么我的导航栏在不进入垂直列表的情况下不会中心。

html：

<div class='nav'>
<ul class='menu' id='menu'>
<li><a expr:href='data:blog.homepageUrl'>home</a></li>
<li><a class='drop-ctg' href='a'>MAKEUP</a>
   <ul>
     <li><a href='a'>EYES</a></li>
     <li><a href='a'>LIPS</a></li>
     <li><a href='a'>FACE</a></li>
   </ul>
</li>
<li><a href='a'>SKINCARE</a></li>
<li><a href='a'>LIFESTYLE</a></li>
<li><a href='a'>DIY</a></li>
<li><a href='a'>CONTACT</a></li>
</ul>
</div>

和CSS，我认为：

*{
  margin:0;
  padding:0;
  outline:0;
}
.nav {
  width:950px;
  height:auto;
  border-bottom:1px solid #eee;
  margin:10px auto 5px;
  display:inline-block;
}
.menu {
  width:auto;
  list-style:none;
  font:$pagenavifont;
  text-align:center;
  margin:0 auto;
}
.menu a {
  float:left;
  color:#999;
  text-decoration:none;
  text-transform:uppercase;
  width:auto;
  line-height:36px;
  padding:0 20px;
}
.menu a:hover,li.menuhover a{
  color:#111;
}
.menu li {
  position:relative;
  float:left;
  width:auto;
}
.menu li:last-child {
  background:none;
}
.menu ul{
  display:none;
  position:absolute;
  top:36px;
  left:0;
  background:#fbfbfb;
  display:none;
  list-style:none;
}
.menu ul li{
  float:none;
  border-top:1px solid #e3e3e3;
  border-right:1px solid #e3e3e3;
  border-left:1px solid #e3e3e3;
  width:auto;
  background:none;
}
.menu ul li:last-child {
  border-bottom:1px solid #e3e3e3
}
.menu ul li a{
  float:none;
  display:block;
  background:none;
  line-height:36px;
  min-width:137px;
  width:auto;
  text-align:left;
  padding-left:10px;
  color:#444;
}
.menu ul li a:hover{
  background:#fdfdfd;
  color:#777;
}

我今天刚刚开始我的博客，到目前为止，我已经了解到摆脱浮动并放置内联块可能会有所帮助，但有很多我真的不知道哪些代码适用于什么。任何帮助表示赞赏！

以下是小提琴链接：http://jsfiddle.net/vFDrV/9/ 这是我博客的链接：http://theprettyfoxes.blogspot.com/

Answer 1

从下面删除浮动：

.menu a {
    /*float: left;*/
    color: #999;
    text-decoration: none;
    text-transform: uppercase;
    width: auto;
    line-height: 36px;
    padding: 0px 20px;
}

.menu li {
    position: relative;
    /*float: left;*/
    width: auto;
    display: inline; /* <- add this */
}

Answer 2

如果我理解你的问题，那很简单。

将以下代码添加到菜单css类。

.menu { /* applying to a ul element */ 
    /* ... your code ... */ 
    display: inline-block;
}

您可以在Mozilla文档中了解更多相关信息

https://developer.mozilla.org/en-US/docs/Web/CSS/display

当我们添加“inline-block”时，它发生了什么：

该元素生成一个将与其一起流动的块元素框周围的内容就像它是一个单行内联框（行为很多就像被替换的元素一样）

多数民众赞成！

居中水平导航栏

2 个答案: