css中Li的横向排列自适应宽度的问题
.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} 展开
首先学习一下width属性的定义和用法：
定义和用法
width 属性设置元素的宽度。
说明
这个属性定义元素内容区的宽度，在内容区外面可以增加内边距、边框和外边距。
行内非替换元素会忽略这个属性。
可以通过width属性设置li中字段的宽度根据实际长度显示宽度。在li的样式中加上width:auto;就可以实现了；现在来看下面一段代码：
CSS样式设置：
#info_main{text-align:center; border:1px solid #CCC;width:620px;}
#info_main li{width:auto;float:left;margin:0px 8px; padding:0px;border:1px solid #CCC;}网页代码：
<div id="info_main">
<ul>
<li>时间：{dede:field name='pubdate' function='strftime("%Y-%m-%d %H:%M","@me")' /}</li>
<li>来源：{dede:field.source/}</li>
<li>作者:{dede:field.writer/}</li>
<li>点击:<script src="{dede:field name='phpurl'/}/count.php?view=yes&aid={dede:field name='id'/}&mid={dede:field name='mid'/}" type='text/javascript' language="javascript"></script>次</li>
</ul>
</div>
当父元素和子元素都没有定义宽度的情况下实现水平居中：
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将会用于未来。
把导航结构贴一下，我帮你改改~
是需要整个CSS吗？
你的html的页面~~
<style>
.nav{
width:1000px; /*这个值就根据你自己的*/
}
.nav li{
float:left;
display:inline-block;
border:#CCC 1px solid;
padding:5px 10px; /*5px为上下 ，10px为左右，具体值你自己需求了*/
｝
</style>
</head>
<body>
<div class="nav">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">我们的服务</a></li>
</ul>
</div>
</body>
