前往顾页
以后地位: 主页 > 收集编程 > Php实例教程 >

若何让li标签主动宽度主动换行

时候:2018-08-11 23:24来源:知行网www.zhixing123.cn 编辑:麦田守望者

用到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>汽车年夜世界</li><li>武汉晨报</li><li>车主之友</li><li>湖北日报</li><li>楚天金报</li><li>荆楚网</li><li>长江商报</li><li>武汉晚报</li><li>汽车年夜世界</li><li>武汉晨报</li><li>车主之友</li><li>湖北日报</li><li>楚天金报</li><li>荆楚网</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;
}

问题处理。

顶一下
(1)
100%
踩一下
(0)
0%
------分开线----------------------------
标签(Tag):li标签 主动宽度主动换行
------分开线----------------------------
颁发评论
请自发遵循互联网相关的政策法规,严禁公布色情、暴力、革命的谈吐。
评价:
神色:
考证码:点击我更换图片
猜你感兴趣