带有 CSS 的中心导航栏
我正在尝试使导航栏居中.我检查了我的网站,但没有任何效果我完全不知道为什么它不会居中,这是我想要居中的导航栏 HTML:
I am trying to center my nav bar. I checked my sites but nothing works and I'm completely stumped as to why it won't center, here is my navigation bar HTML that I want to center:
<div class='nav'>
<ul class='menu' id='menu'>
<li><a expr:href='data:blog.homepageUrl'>home</a></li>
<li><a class='drop-ctg' href='#'>PORTFOLIO</a>
<ul>
<li><a href='http://effectsforshare.blogspot.com/p/trailer.html'>TRAILER</a></li>
<li><a href='http://effectsforshare.blogspot.com/p/motion-graphics.html'>MOTION GRAPHICS</a></li>
<li><a href='http://effectsforshare.blogspot.com/p/trapcode-particular.html'>TRAPCODE PARTICULAR</a></li>
</ul>
</li>
<li><a href='http://effectsforshare.blogspot.com/'>TEMPLATES</a></li>
<li><a href='http://effectsforshare.blogspot.com/p/my-blog.html'>MY BLOG</a></li>
<li><a href='http://effectsforshare.blogspot.com/p/contact-me.html'>CONTACT ME</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;
}
我会给您一个指向该页面的链接,但它正在 Dreamweaver 中完成,尚未启动.logobar.jpg
是网页的标志.我喜欢它的外观,但是当我缩小屏幕尺寸时,它需要居中,而不是被切断或带到下一行.
I would give you a link to the page but it's being done in Dreamweaver and is not up yet. The logobar.jpg
is the logo for the webpage. I love how it looks, but it needs to be centered and not be cut off or taken to the next line when I shrink my screensize.
我在几乎所有的类上都尝试了 float: right
、float: left
和 float: none
;text-align: center
在html端的每个类上;我在每个班级都尝试过 align=center
;display: inline
、inline-block
在 ul
和 li
类上.
I tried each of float: right
, float: left
, and float: none
on almost all of the classes; text-align: center
on each class on the html side; I have tried align=center
on each class; display: inline
, inline-block
on ul
and li
classes.
感谢您的帮助!
推荐答案
在您的 .menu
类上,您确实设置了 text-align:center
.我们当然可以使用它来居中子节点.
On your .menu
class, you do have text-align:center
set. We can certainly use that to center the child nodes.
所以在您的 .menu li
css 属性中,添加 display:inline-block
并删除浮动.这将使您的列表项居中.
So within your .menu li
css property, add display:inline-block
and remove the floats. This will center your list items.
见小提琴: http://jsfiddle.net/RGREA/
相关文章