我试图将我的css导航栏居中,但找不出为什么不工作,我哪里做错了。我想把它放在页面的中央上方。我试着使用空白处:0自动,但我的代码如下所示:
<style>
ul {
list-style-type: none;
padding: 0;
overflow:hidden;
}
a:link,a:visited {
margin:0 auto;
display:block;
width: 120px;
font-weight:bold;
color:#FFFFFF;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
a:hover, a:active {
background-color:#7A991A;
}
li {
float: left;
}
#menu {
background-color:#98bf21;
}
</style>
<div id="menu">
<header>
<ul>
<li><a href="Home.aspx">Home</a></li>
<li><a href="News.aspx">News</a></li>
<li><a href="Articles.aspx">Articles</a></li>
<li><a href="Forum.aspx">Forum</a></li>
<li><a href="Contact.aspx">Contact</a></li>
<li><a href="About.aspx">About</a></li>
</ul>
</header>
</div>
发布于 2013-12-18 14:46:41
margin: 0 auto;
仅适用于定义了宽度的项目。但是,按照您当前编写的方式,当您确实想要将ul居中时,每个a标签都试图居中。当你不知道你的ul的宽度时,这是一个很好的居中方式。在header、ul和li元素中使用这些样式。将样式添加到您的a标签以适应需求。
header {
float: left;
width: 100%;
overflow: hidden;
position: relative;
}
ul {
float: left;
list-style: none;
position: relative;
left: 50%;
}
li {
display: block;
float: left;
position: relative;
right: 50%;
}
这里发生的事情是,我们将标题设置为全宽,然后将ul推到浏览器宽度的一半。然后我们将li的宽度推到ul宽度的一半,而ul现在将它们放在页面的中心。
这里有一个链接,里面有一个非常有用的教程,介绍如何做这件事:http://matthewjamestaylor.com/blog/beautiful-css-centered-menus-no-hacks-full-cross-browser-support
祝好运!
发布于 2013-06-28 23:51:44
使用inline-block
css的魔力:)
发布于 2013-06-28 23:50:00
li {
display: inline-block;
}
#menu {
background-color:#98bf21;
margin: 0 auto;
text-align: center;
width: 80%;
}
https://stackoverflow.com/questions/17368615
复制相似问题