首先学习一下width属性的定义和用法：
定义和用法
width 属性设置元素的宽度。
说明
这个属性定义元素内容区的宽度，在内容区外面可以增加内边距、边框和外边距。
行内非替换元素会忽略这个属性。
可以通过width属性设置li中字段的宽度根据实际长度显示宽度。在li的样式中加上width:auto就可以实现了；现在来看下面一段代码：
CSS样式设置：
#info_main{text-align:center border:1px solid #CCCwidth:620px}#info_main li{width:autofloat:leftmargin:0px 8px padding:0pxborder: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>
一、创建一个新的HTML文件
二、创建HTML标记和内容。
三、预览效果如图所示。
四、设置左边框的宽度border-left-width: 15px。
五、预览效果如图。
六、设置左边框的宽度border-left-width: thin。
七、预览效果如图所示。
如果是导航菜单可以使用ul无需列表来制作
同时使用CSS中的float：left来控制li靠左浮动即可实现横向菜单
注意UL或UL的父级容器宽度必须大于所有li宽度的和
例如
<style>ul {
padding:0
margin:0
list-style:none
width:600px
height:50px
line-height:50px
text-align:center
}
ul li {
width:100px
height:50px
float:left
}
<style>
<ul>
<li>菜单项目1</li>
<li>菜单项目2</li>
<li>菜单项目3</li>
<li>菜单项目4</li>
<li>菜单项目5</li>
<li>菜单项目6</li>
<ul>
