父元素position: relative;子元素position: absolute;子元素要超出父元素，但宽度不确定
子元素比父元素宽，当子元素定位在父元素位置上之后，继承了父元素的宽度，只能给子元素设置宽度撑开，可是子元素的宽度是自适应，不固定的，有什么办法解决吗？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<style>
* { padding: 0; margin: 0;}
li { list-style: none; }
a { text-decoration: none;}
.hide { display: none; }
.test { }
.test li { position: relative; float: left; }
.test li a { display: block; width: 50px; height: 50px; background-color: red; border-radius: 50%; font-size:24px; color: #fff; line-height: 50px; text-align: center;margin-right: 15px;}
.test li p { position: absolute; top: 0; left: 0; height: 50px; background-color: orange; border-radius: 30px; overflow: hidden; line-height: 50px; color: #fff; padding: 0 15px; }
</style>
</head>
<body>
<ul class="test">
<li>
<a href="">2</a>
<p>我是一段比父元素宽的文字，而且宽度不固定</p>
</li>
<li>
<a href="">2</a>
<p class="hide">我是一段比父元素宽的文字，而且宽度不固定</p>
</li>
<li>
<a href="">3</a>
<p class="hide">我是一段比父元素宽的文字，而且宽度不固定</p>
</li>
</ul>
</body>
</html>
代码是这样的，现在的效果是图1，想实现的效果是图二
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（5）
如果自适应子元素里面是文本，同时无需兼容到ie8以下的的话，可以给子元素添加word-break: keep-all来曲线实现
中间再套一层元素，a>b>c，a是原来父元素，写死宽度，b是新加的，也是relative，也写死宽度，但是写非常大，比如9999px，c是原来子元素
浮动不知道行不行
子元素用inline-block试试，ie6/7再做下兼容
子元素 width:max-content 试试 ?