中心导航栏css

Question

我想在页面中间放置导航栏但我不知道该怎么做.这是我的代码.

CSS

ul {
  list-style-type:none;
  margin:0;
  padding:0;
  overflow:hidden;
}
li {
  float:left;
}
a {
  display:block;
  width:80px;
  background-color:#000000
}

HTML

<ul>
  <li><a href="http://kevril.site40.net/">Home</a></li>
  <li><a href="http://www.youtube.com/user/SuperKevril">Youtube</a></li>
</ul>

Answer 1

中心块级元素很容易,只需定义一个width和设置margin:0 auto;,但如果你不知道固定宽度怎么办？您可以使用text-align:center;,但这对width:100%块级元素也不起作用......这只适用于文本级元素.

定义明确width并且height应该始终尽可能避免,因为这样做会使文档更具有前瞻性,灵活性和可扩展性.假设导航菜单中有四个项目.您可以解决width这些问题并使用margin:0 auto;它们来集中它们.添加第五个会增加宽度,这意味着你也需要改变CSS.这远非理想,使用CMS为站点供电更是如此(客户端可以添加页面,但可能无法编辑CSS).

但是,有一种方法可以在不知道明确宽度的情况下进行居中的水平导航,而无需添加CSS.它也非常容易.试试这个:

HTML:

<ul class="nav">
  <li><a href="/">Home</a></li>
  <li><a href="/about/">About</a></li>
  <li><a href="/work/">Work</a></li>
  <li><a href="/clients/">Clients</a></li>
  <li><a href="/contact/">Contact</a></li>
</ul>

CSS:

.nav{
    border:1px solid #ccc;
    border-width:1px 0;
    list-style:none;
    margin:0;
    padding:0;
    text-align:center;
}
.nav li{
    display:inline;
}
.nav a{
    display:inline-block;
    padding:10px;
}