首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > CSS >

求幫忙解決左浮動Li里的Span元素換行后獨佔一行的問題,该怎么解决

2012-06-15 
求幫忙解決左浮動Li里的Span元素換行后獨佔一行的問題cssul{ list-style-type:none border:0pxfont-size

求幫忙解決左浮動Li里的Span元素換行后獨佔一行的問題
css
ul{ list-style-type:none; border:0px; font-size:12px; width:100%;} 
li{float:left; padding-top:3px; padding-bottom:0px; margin-bottom:0px; white-space:nowrap; line-height:20px;}
li span{ float:left; font-weight:bold;line-height:19px; padding-bottom:0px; padding-top:0px; padding-left:5px; padding-right:5px; position:relative; left:0px;}

li內容格式如下: 
<ul>
  <li><a href="#">雜項工具</a><span>|</span></li>
  <li><a href="#">配置器</a><span>|</span></li>
  <li><a href="#">電鎖</a><span>|</span></li>
  <li><a href="#">腳坐</a><span>|</span></li>
  <li><a href="#">PC版</a><span>|</span></li>
  <li><a href="#">電阻</a><span>|</span></li>
  <li><a href="#">頂針</a><span>|</span></li>
  <li><a href="#">彈簧</a><span>|</span></li>
  <li><a href="#">皮帶</a><span>|</span></li>
  <li><a href="#">輪子</a><span>|</span></li>
  <li><a href="#">馬達</a><span>|</span></li>
  <li><a href="#">軸承</a><span>|</span></li>
  <li><a href="#">氣壓零件</a><span>|</span></li>
  <li><a href="#">氣缸</a><span>|</span></li>
  <li><a href="#">皮尺</a><span>|</span></li>
  <li><a href="#">捲尺</a></li>
</ul>
  
在IE8里運行后,用localhost訪問很正常,li自動排列,並且會自動換行
在IE8里用IP地址去訪問或者用IE6去訪問,發現大部份li正常,但有幾個"|"換行了之後獨自占了一行。
怎麼調都沒調好,求大蝦賜教!


[解决办法]
li, li span{display:inline-block;overflow:hidden;}
[解决办法]
li a {float:left;}
[解决办法]
ul{ list-style-type:none; border:0px; font-size:12px; width:100%;}
li{float:left; padding-top:3px; padding-bottom:0px; margin-bottom:0px; white-space:nowrap; line-height:20px;}
li span{ float:left; font-weight:bold;line-height:19px; padding-bottom:0px; padding-top:0px; padding-left:5px; padding-right:5px; position:relative; left:0px;}


-------------
把 span中的float拿掉

热点排行