如何在具有絕對位置的元素上製作靈活的寬度？

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

是你想要？

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

Answer 2

你爲什麼不只是改變你的最大寬度爲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; 
}