居中水平导航栏

用户名

关于这个主题的答案怎么可能这么多,我仍然不知道该怎么办?我已经在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/

伊曼纽尔·贾尼科(Emanuel Gianico)

如果我正确理解了您的问题,这很简单。

将以下代码添加到菜单CSS类中

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

您可以在Mozilla文档中阅读有关此内容的更多信息

https://developer.mozilla.org/zh-CN/docs/Web/CSS/display

当我们添加“ inline-block”时,这是怎么回事

该元素生成一个块元素框,该框将随周围的内容一起流动,就好像它是单个内联框一样(与被替换的元素非常相似)

就这样!

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章