问题描述
我正在尝试使导航栏居中.我检查了我的网站,但没有任何效果我完全不知道为什么它不会居中,这是我想要居中的导航栏 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/