我可能真的很累，但是我无法为自己的生活弄清楚为什么display: inline-block不能使父母的宽度适应其内容的大小。我曾尝试搜索其他解决方案，但是我发现的每个资源都说添加inline-block到父级应该可以解决问题。
在下面的示例中，我试图使蓝色方块仅延伸到绿色方块的边缘，然后最终通过margin: 0 auto;以下方式将内容居中：
#intro {
height: 400px;
background-color: red;
}
.slide-txt {
display: inline-block;
width: 30%;
background-color: lime;
}
.slide-box {
display: inline-block;
margin: 0 auto;
background-color: blue;
}<section id="intro" class="image-slider">
<div class="container" id="intro-slide">
<div class="slide-box">
<img src="http://www.jkoffset.com/assets/images/Packaging1.jpg" alt="same-box-slide" width="150px">
<div class="slide-txt">
<h1 class="title">Headline <span>Goes Here</span></h1>
<div class="caption"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<a class="btn" href="#">
Learn More
</a>
</div>
</div>
</div>
</div>
</section>使用width:30%;在div子（.slide-TXT）将使父DIV扩大，以填补另外的70％，所以为了避免这种情况，使之根据需要使用PX而非％在div子内容调整。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句