父元素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，想实现的效果是图二

子元素用inline-block试试，ie6/7再做下兼容

中间再套一层元素，a>b>c，a是原来父元素，写死宽度，b是新加的，也是relative，也写死宽度，但是写非常大，比如9999px，c是原来子元素

浮动不知道行不行

如果自适应子元素里面是文本，同时无需兼容到ie8以下的的话，可以给子元素添加word-break: keep-all来曲线实现

【热门文章】