Question

css代码横向排列怎样自动适应宽度？

一段css代码，导航栏目的字数是不一样的，我想让他根据字数自动伸缩长度

.nav_name{width:770px; height:38px; line-height:38px; padding-left:4px; float:left}
.nav_name ul{display:none; position:absolute; left:0;top:40px;}
.nav_name a{display:block; text-align:center;float:left; margin-top:2px; width:85px; text-align:center;font-size:14px; font-family:"微软雅黑"}
.nav_name a:hover,.nav .nav_name a.cur{background:#d24f5e;background:url(../images/nav.gif) repeat-x}
.nav_name li{ position:relative; float:left;z-index:10;}
.listNav{ background:url(../images/listNav.gif) #d24f5e repeat-x; width:85px; position:absolute;}
.listNav a{ display:block; margin-top:0; border-bottom:dotted 1px #a93643;font-family:"微软雅黑"; }
.listNav a:hover{ background:#a93643; font-weight:normal}
.listNav a.no{ border:none}
.listNav li a{ font-weight:normal}

Answer 1

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

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

1、HTML代码: 

代码如下:

<div class="navbar"> 
<ul> 
<li><a href="/">Home</a></li> 
… 
</ul> 
</div> 

2、CSS代码: 

代码如下:

.navbar { 
text-align:center; 
} 
.navbar ul { 
display:inline-block; 
} 
.navbar li { 
float:left; 
} 
.navbar li + li { 
margin-left:20px; 
} 

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

代码如下:

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

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

代码如下:

<div class="navbar"> 
<div> 
<ul> 
<li><a href="/">Home</a></li> 
… 
</ul> 
</div> 
</div> 

CSS代码: 

代码如下:

.navbar { 
overflow:hidden; 
} 
.navbar > div { 
position:relative; 
left:50%; 
float:left; 
} 
.navbar ul { 
position:relative; 
left:-50%; 
float:left; 
} 
.navbar li { 
float:left; 
} 
.navbar li + li { 
margin-left:20px; 
} 

浏览器支持度较低 只Chrome和Firefox这样的-webkit- -moz-内核浏览器。当然以后慢慢会发展起来的。 
这个方式是推动浏览器发展的一个新的东西，目前供应于所以可以写前缀的浏览器，并没有工作在IE9和IE9以下。 
根据你的需求来选择合适的方法吧，display:inline-block兼容性较好，flex-box将会用于未来。