让LI标签自动宽度自动换行的解决方案

最新推荐文章于 2023-11-13 21:31:36 发布

前端独秀

最新推荐文章于 2023-11-13 21:31:36 发布

阅读量3.1k

点赞数

分类专栏：前端文章标签： CSS

原文链接：https://www.mk2048.com/blog/blog.php?id=j2a2ajbab&title=%E8%AE%A9LI%E6%A0%87%E7%AD%BE%E8%87%AA%E5%8A%A8%E5%AE%BD%E5%BA%A6%E8%87%AA%E5%8A%A8%E6%8D%A2%E8%A1%8C%E7%9A%84%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88

版权

前端专栏收录该内容

493 篇文章

订阅专栏

用到li标签，要自动宽度，因为无法预计里面的text的长度，如果固定宽度，又浪费很多空白。

但是死活就是出错，英文没问题，中文就不行：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>无标题文档</title>

<style>

.link-m1{

width:400px;

}

.link-m1 ul li{

float:left;

margin:2px 5px;

list-style:none;

display:block;

}

</style>

</head>

<body>

<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>

显示效果：