列表文字溢出

最新推荐文章于 2024-07-26 20:27:40 发布

weixin_37460170

最新推荐文章于 2024-07-26 20:27:40 发布

阅读量300

点赞数

分类专栏： ‘美人在骨不在皮’---实现原理

本文链接：https://blog.csdn.net/weixin_37460170/article/details/77934472

版权

‘美人在骨不在皮’---实现原理专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1、li不浮动时，li里面内容浮动，产生li与li之间的间隙问题；

2、文字溢出问题

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<style>
ul{width:302px; margin:0;padding:0; list-style:none;}
li{ height:30px; font-size:12px; line-height:30px;border:1px solid #000; vertical-align:top;}
p{ margin:0;float:left;padding-right:50px; position:relative; overflow:hidden;height:30px;}
span{padding-left:10px;width:40px; position:absolute;right:0;top:0;}
</style>
</head>
<body>
<ul>
	<li>
    	<p>
            <a href="#">文字文字文字文字文字字文字文字文字文字文字文字字文字文字文字文字文字文字字文字</a>
            <span>文字</span>
        </p>
    </li>
</ul>
</body>
</html>