1

我想在页面中间有我的导航栏，但我不知道该怎么做。这是我的代码。

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>
4

2 回答 2

7

居中块级元素很容易，只需定义 awidth和 set 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;
}
于 2013-03-15T00:37:05.347 回答
1

尝试这个：

position: relative;
margin: auto;
于 2013-03-15T00:33:04.690 回答