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就没有出现上面的情况.