css自适应宽度 多种方法实现宽度自适应的水平居中，转

当父元素和子元素都没有定义宽度的情况下实现水平居中：

display:inline-block

可以使用text-align:center和display:inline-block相结合，这个技巧需要一个父元素。

HTML代码:

1 <div class="navbar"> 
2 <ul> 
3 <li><a href="/">Home</a></li> 
4 … 
5 </ul> 
6 </div> 

CSS代码:

 1 .navbar { 
 2 text-align:center; 
 3 } 
 4 .navbar ul { 
 5 display:inline-block; 
 6 } 
 7 .navbar li { 
 8 float:left; 
 9 } 
10 .navbar li + li { 
11 margin-left:20px; 
12 } 

IE系列IE8+支持，要IE7 IE6 支持需要加入以下代码使display:inline像display:inline-block一样

1 .navbar ul { 
2 *display:inline; 
3 *zoom:1; 
4 } 

position:relative

使用position:relative与float相结合的技巧及其浮动和定位参照物的关系，这个技巧需要两个父元素，一个用来定位而另外一个用来避免出现滚动条。

HTML代码:

1 <div class="navbar"> 
2 <div> 
3 <ul> 
4 <li><a href="/">Home</a></li> 
5 … 
6 </ul> 
7 </div> 
8 </div> 

CSS代码:

 1 .navbar { 
 2 overflow:hidden; 
 3 } 
 4 .navbar > div { 
 5 position:relative; 
 6 left:50%; 
 7 float:left; 
 8 } 
 9 .navbar ul { 
10 position:relative; 
11 left:-50%; 
12 float:left; 
13 } 
14 .navbar li { 
15 float:left; 
16 } 
17 .navbar li + li { 
18 margin-left:20px; 
19 } 

IE7下需要加入下列代码支持：

1 .navbar { 
2 position:relative; 
3 } 

display:table

如果向使用极少的标签实现，这个方法是个不错的选择。

HTML代码:

1 <ul class="navbar"> 
2 <li><a href="/">Home</a></li> 
3 … 
4 </ul>

CSS代码:

 1 .navbar { 
 2 display:table; 
 3 margin:0 auto; 
 4 } 
 5 .navbar li { 
 6 display:table-cell; 
 7 } 
 8 .navbar li + li { 
 9 padding-left:20px; 
10 } 

不支持IE7及一下浏览器，其他的主流浏览器都支持。

display:inline-flex

这个方法需要使用 flex-layout 的知识。

HTML代码:

1 <div class="navbar"> 
2 <ul> 
3 <li><a href="/">Home</a></li> 
4 … 
5 </ul> 
6 </div> 

CSS代码:

 1 .navbar { 
 2 text-align:center; 
 3 } 
 4 .navbar > ul { 
 5 display:-webkit-inline-box; 
 6 display:-moz-inline-box; 
 7 display:-ms-inline-flexbox; 
 8 display:-webkit-inline-flex; 
 9 display:inline-flex; 
10 } 
11 .navbar li + li { 
12 margin-left:20px; 
13 } 

使用CSS fit-content 值

下面看看如何用fit-content创建一个包含子元素浮动的未知宽度的导航。

HTML代码:

1 <div class="navbar center"> 
2 <ul> 
3 <li><a href="/">Home</a></li> 
4 <li><a href="/">About us</a></li> 
5 <li><a href="/">Our products</a></li> 
6 <li><a href="/">Customer support</a></li> 
7 <li><a href="/">Contact</a></li> 
8 </ul> 
9 </div> 

CSS代码:

代码如下:

1 .center ul{ 
2 width: -moz-fit-content; 
3 width: -webkit-fit-content; 
4 width: fit-content; 
5 margin: auto; 
6 } 

浏览器支持度较低 只Chrome和Firefox这样的-webkit- -moz-内核浏览器。当然以后慢慢会发展起来的。

这个方式是推动浏览器发展的一个新的东西，目前供应于所以可以写前缀的浏览器，并没有工作在IE9和IE9以下。

根据你的需求来选择合适的方法吧，display:inline-block兼容性较好，flex-box将会用于未来。