如何在具有绝对位置的元素上设置灵活宽度？答案

【问题标题】：How do I make a flexible width on an element with absolute position?如何在具有绝对位置的元素上设置灵活宽度？
【发布时间】：2016-06-14 20:53:02
【问题描述】：

.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;
}

【问题讨论】：

请为您的代码提供fiddle。

标签： html css width css-position absolute

【解决方案1】：

这是你想要的吗？

.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;
}

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

【讨论】：

【解决方案2】：

你为什么不把你的 max-width 改为 width: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;
}

【讨论】：