Question

有没有CSS属性，可以让我保留顶部示例（嵌套div）的当前结构，但使父级宽度与底部示例（独立div）一样宽

当前，我尝试在父级上使用“ display：inline”，但它仍会延伸到子级的内容宽度。

.parent {
  display:inline-block;
  background: aqua;
}


.how-it-should-look {
  display:inline-block;
  background: aqua;
}

<div class='parent'>
Parent Text
  <div>
  Child Text Child Text Child Text Child Text Child Text Child Text 
  </div>
</div>



<br><br><br>
<div class='how-it-should-look'>
Parent Text
</div>
<br>
<div class='how-it-should-look'>
  Child Text Child Text Child Text Child Text Child Text Child Text 
</div>

基本上，我希望顶部示例看起来与底部示例相同，只是更改CSS。

Answer 1

更改为display:inline而不是display:inline-block

.parent {
  display:inline;
  width:auto;
  background: aqua
}

.parent > div{
  display:block;
  width:max-content;
  background:aqua
}

<div class='parent'>
Parent Text
  <div>
  Child Text Child Text Child Text Child Text Child Text Child Text 
  </div>
</div>

Answer 2

如果您想避免使用max-content并获得更好的支持，这是另一个想法：

.parent,
.parent > *{
  display:inline;
  background: aqua;
}


.parent > *:before {
  content:"\A";
  white-space:pre-wrap;
}

<div class='parent'>
Parent Text
  <div>
  Child Text Child Text Child Text Child Text Child Text Child Text 
  </div>
</div>

使父母的宽度小于孩子的宽度

2 个答案: