使子元素超出其父元素的寬度[重復]

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>