日期:2014-05-17  浏览次数:20801 次

li和a标签换行问题, 解决立即给分.
CSS代码:
ul{list-style: none;}
li{clear: both; float: left;}

HTML代码:
<ul>
  <li><a href="#">链接1</a>(时间1)</li>
  <li><a href="#">链接2</a>(时间2)</li>
  <li><a href="#">链接3</a>(时间3)</li>
</ul>


为什么在网页输出的都是这样的:
链接1
(时间1)
链接2
(时间2)
链接3
(时间3)

我想要下面这样:
链接1 (时间1)
链接2 (时间2)
链接3 (时间3)

CSS应该怎么写呢? 或者是html代码应该怎么改呢? 谢谢了!


------解决方案--------------------
进来学习了
------解决方案--------------------
光是上述代码,在ie7, ff2下测试并未换行,是不是父元素css定义的问题?
------解决方案--------------------
这个应该是与<div>设置的样式有关系了,比如你定义了宽度不够放这些字,又设置了自动换行
就会这样
------解决方案--------------------
给li定义宽度.CSS代码: 
ul{list-style: none;} 
li{clear: both;width:200px; float: left;} 

------解决方案--------------------
li{clear:both;width:200px;float:left;}
------解决方案--------------------
肯定不是IE的问题,是CSS样式的问题!

<style>
ul{list-style: none;} 
li{clear: both; float: left;} 
</style>
<div> 
<ul> 
<li> <a href="#"> 链接1 </a> (时间1) </li> 
<li> <a href="#"> 链接2 </a> (时间2) </li> 
<li> <a href="#"> 链接3 </a> (时间3) </li> 
</ul> </div>

我直接放在IE里测试,没问题

我的是IE6和FF下都没有你说的情况

我想你肯定是外围的样式限制了
------解决方案--------------------
楼主拿这段去测测 
HTML code
<style type="text/css"> 
#div1 ul{list-style: none;}   
#div1 li{width:80px;height:22px;}   
#div1 li b{float:right;    font-weight: normal; width:30px;}
#div1 li a{float:left;width:50px;}
#div1 li a:hover{float:left;width:50px;background-color: #CCCCCC;border: 1px solid #666666;}
</style> 
<div id="div1">   
<ul>   
        <li> <a href="#">   链接1   </a>   <b>(时间1)</b>   </li>   
        <li> <a href="#">   链接2   </a>  <b> (时间2)</b>   </li>   
        <li><a href="#">   链接3   </a>   <b>(时间3)</b>   </li>   
</ul>   </div>

------解决方案--------------------
如果是这样,楼主加上a {white-space:nowrap;}看看
------解决方案--------------------
检查是否对a{display:block}过
------解决方案--------------------
我用的是IE6.0+SP2就没有出现上面的情况.