html - 居中并设置自动宽度 CSS

Question

我一直在尝试这样做一段时间，但我似乎无法让我的导航栏居中，我想让它调整它的宽度以适应其中的所有内容。

<nav>
    <ul id="menu" class="black">
        <li><a href="index.html">Home</a></li>
        <li><a href="services.html">Services</a></li>
        <li><a href="blog.html">Blog</a></li>
        <li><a href="contact.html">Contact</a></li>
    </ul>
</nav>

http://jsfiddle.net/e4fa6/

Answer 1

我做了一些更改，将您的 li 设置为：

#menu li {
  display: inline-block;
  float: none;
  margin: 0;
}

还将您的#menu 设置为：

#menu {
  text-align: center;

}

演示在这里：http: //jsfiddle.net/e4fa6/2/

Answer 2

我用更新叉了你的小提琴：http: //jsfiddle.net/dvdNf/

我在你的 s中添加了width: 25%;和text-align: center;<li>

Answer 3

我会用display: table;自动宽度元素居中。

演示http://jsfiddle.net/kevinPHPkevin/e4fa6/4/

nav {
    display: table;
    margin: auto;
}