免备案空间|国内免备案空间|月付空间|国内免备案主机

css中LI标签自动换行自动宽度

做网站设计的人员经常会遇到这样的问题,就是在用li标签时,又要自动宽度,又要让它自动换行,因为无法预计里面的text的长度,如果固定宽度,又浪费很多空白。没改之前的样式如下所示:


但是死活就是出错,英文没问题,中文就不行:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
.link-m1{
 width:400px;
}
.link-m1 ul li{
 float:left;
 margin:2px 5px;
 list-style:none;
 display:block;

}
</style>
</head>

<body>
 <div class="link-m1">
<ul>
<li>为学培训网</li><li>360自考网</li><li>免备案空间</li><li>为学培训网</li><li>360自考网</li><li>免备案空间</li><li>为学培训网</li><li>360自考网</li><li>免备案空间</li><li>为学培训网</li><li>360自考网</li><li>免备案空间</li><li>为学培训网</li><li>360自考网</li><li>免备案空间</li><li>为学培训网</li><li>360自考网</li><li>免备案空间</li>
</ul>
    </div>
</body>
</html>
搞了足足1 个小时。晕,最后终于找到了原因,很简单,在LI标签中加这个样式即可:white-space: nowrap;
.link-m1 ul li{
 float:left;
 margin:2px 5px;
 list-style:none;
 display:block;
white-space: nowrap;
}

问题解决。测试通过的,大家可以试下。
 

本文来自:http://www.51cdz.com免备案空间、不需要备案空间、国内月付空间,希望与大家一起进步!

便宜域名注册、月付空间、免备案空间、国内免备案空间
更多



标签:li标签li换行li标签自动换行自动宽度 免备案空间
分类:网站建设| 发布:51网络科技| 查看: | 发表时间:2011-7-27
本文链接:http://www.51cdz.com/article/42.html

相关文章

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。