使绝对定位的子项宽于100%,但仍保持自动宽度

时间:2019-03-20 22:40:06

标签: html css

我有两个div,如下所示:

<div>
   <p>Parent</p>

   <div>
       <p>Child</p>
   </div>
</div>

现在,子div内容可能会更长或更短。如果较短,则宽度将正确调整。但是,如果它更大,则内容将换行,而不是跨越父div的100%以上。

我知道我可以手动设置宽度,但是我希望该宽度是自动的,并且可以扩展100%以上(并且不留空白)。

1 个答案:

答案 0 :(得分:1)

您在这里:

.child {
  white-space: nowrap;
}
<div class="parent">
   Parent
   <div class="child">Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child Child </div>
</div>