Question

.in的宽度自动为.three的宽度。 .in中的文本量对每个列表元素都是灵活的。我需要.in的宽度来根据其中的文字数量进行调整。

min-width会使它不会太小，但只有几个字时会有额外的空间。 width:auto和height:auto不会改变任何内容。将display转为inline-block或table也不起作用，也许是因为position:absolute？

现在它与父母的宽度相同而且很高，看起来很奇怪。

<ul>
    <li>
        <div>
            <p class="one">One</p>
            <p class="two">Two</p>
            <a class="three">Three<p class="in">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p></a>
            <p class="four">Four</p>
            <p class="five">Five</p>
        </div>
    </li>
    <li>
        <div>
            <p class="one">One</p>
            <p class="two">Two</p>
            <a class="three">Three<p class="in">Lorem ipsum</p></a>
            <p class="four">Four</p>
            <p class="five">Five</p>
        </div>
    </li>
</ul>

.in相对于.three定位。它徘徊在右下方。

.three{
    position:relative;
    width:80px;
}
.in{
    background-color:white;
    border-radius:10px 30px 30px 30px;
    left:35px;
    max-width:400px;
    padding:30px;
    position:absolute;
    top:5px;
    z-index:10;
}

Answer 1

你想要的吗？

＆＃13;

.three {
    position: relative;
    display: block;
}
.in {
    background-color: white;
    border-radius: 10px 30px 30px 30px;
    left: 35px;
    padding: 0 30px;
    position: absolute;
    top: 0;
    z-index: 10;
    margin: 0;
}

＆＃13;

<ul>
    <li>
        <div>
            <p class="one">One</p>
            <p class="two">Two</p>
            <a class="three" href="#">Three<p class="in">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p></a>
            <p class="four">Four</p>
            <p class="five">Five</p>
        </div>
    </li>
    <li>
        <div>
            <p class="one">One</p>
            <p class="two">Two</p>
            <a class="three" href="#">Three<p class="in">Lorem ipsum</p></a>
            <p class="four">Four</p>
            <p class="five">Five</p>
        </div>
    </li>
</ul>

＆＃13;

Answer 2

为什么不将最大宽度更改为宽度：500px;或类似的东西然后它应该只是扩展并显示所有文本。 Updated JSFiddle

.in{
    background-color:white;
    border-radius:10px 30px 30px 30px;
    left:35px;
    width: 500px;/<!--This is what you have to change-->
    padding:30px;
    position:absolute;
    top:5px;
    z-index:10;
}

如何在具有绝对位置的元素上创建灵活宽度？

2 个答案: