使子元素超出其父元素的宽度[重复]

Question

这个问题已经在这里有了答案：

• 当父母太小时防止div包装 2答案

我想使子元素超出其父元素。 因此，父元素可以进一步应用overflow-x: scroll 。 以下是我要实现的目标以及获得的目标的一些说明：

插图

我试图通过将display: inline-block应用于子元素来解决问题，或者尝试从类似的问题中找出答案。 但这还没有解决我的问题。 这是html：

<div class="parent">
   <div class="child">Child Element</div>
   <div class="child">Child Element</div>
   <div class="child">Child Element</div>
   <div class="child">Child Element</div>
   <div class="child">Child Element</div>
</div>

每个孩子都有不同的宽度，如果加起来，它将超过父母的宽度。 有什么解决方案或提示吗？

Answer 1

尝试这个

 .parent{ max-width: 100%; overflow-x: scroll; white-space: nowrap; } .child{ display: inline-block; } 

 <div class="parent"> <div class="child">Child Element</div> <div class="child">Child Element</div> <div class="child">Child Element</div> <div class="child">Child Element</div> <div class="child">Child Element</div> </div> 

Answer 2

我为您制作一个演示。

 .child1, .child3, .child4{ width: 100px; float: left; border: 1px solid red; text-align: center; padding: 10px; } .child2, .child5{ width: 300px; float: left; border: 1px solid yellow; text-align: center; padding: 10px; } .parent{ width: 1500px; } .scroll{ max-width: 500px; width: 100%; overflow-x: auto; border: 1px solid #000; padding: 30px; } 

 <div class="scroll"> <div class="parent"> <div class="child1">Child Element</div> <div class="child2">Child Element</div> <div class="child3">Child Element</div> <div class="child4">Child Element</div> <div class="child5">Child Element</div> </div> </div>