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;
}

Answer 2

试试这个：

position: relative;
margin: auto;

中心导航栏css

2 个答案: