用UL+Li 实现横向导航条时设定宽度

最近做一个网站，又要导航条

要实现横向排列，还能设置导航选项的宽度，以前弄过的，又忘了

今天终于在一个被遗弃的文件夹里找到了方法

还是写下来比较好，防止忘掉

HTML如下：

< ul  id ="Nav"  class ="Nav_Css" >
     < li  id ="Nav_Li_1"  class ="Nav_Li_Css" >< span > 导航1 </ span ></ li >
     < li  id ="Nav_Li_2"  class ="Nav_Li_Css" >< span > 导航2 </ span ></ li >
     < li  id ="Nav_Li_3"  class ="Nav_Li_Css" >< span > 导航3 </ span ></ li >
</ ul >

 

CSS代码如下：

主要就是要在Li加上: Float:left 和List-style: none

.Nav_Css {} {display: inline;}
.Nav_Li_Css {} {list-style: none; line-height: 30px; text-align: center; width: 100px; height: 30px; float:left;}

 

这样就可以了~~~~

转载于:https://www.cnblogs.com/zhangrou/archive/2008/09/21/1295265.html