以导航条为例，你通常希望链接的宽度根据它们包含多少文本而有所不同。
1.
display:inline-block如果导航栏有一个您可以设置的父级text-align:center，您可以使用display:inline-block导航栏缩小包装。
html如下：
<div class="navbar">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/">Home</a></li>
<li><a href="/">Home</a></li>
<li><a href="/">Home</a></li>
</ul>
</div>
css代码如下：
.navbar { text-align:center; } .navbar ul { display:inline-block; } .navbar li { float:left; } .navbar li + li { margin-left:20px; }
这个方法可以用在很多地方，
对于IE，甚至在IE7中，如果您触发haslayout并更改display:inline-block为display:inline：
.navbar ul {
display:inline;
zoom:1;
}
2 、display:table
<ul class="navbar">
<li><a href="/">Home</a></li>
…
</ul>
css如下：
.navbar { display:table; margin:0 auto; } .navbar li { display:table-cell; } .navbar li + li { padding-left:20px; }
这种方法不能在IE7或更早版本中工作。
原文：http://www.cnblogs.com/feilu2016/p/6910387.html