关于这个主题的答案怎么可能这么多,我仍然不知道该怎么办?我已经在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/
如果我正确理解了您的问题,这很简单。
将以下代码添加到菜单CSS类中。
.menu { /* applying to a ul element */
/* ... your code ... */
display: inline-block;
}
您可以在Mozilla文档中阅读有关此内容的更多信息
当我们添加“ inline-block”时,这是怎么回事:
该元素生成一个块元素框,该框将随周围的内容一起流动,就好像它是单个内联框一样(与被替换的元素非常相似)
就这样!
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句