你可以尝试使用Flexbox，它真的很酷处理布局。
你可以阅读更多关于它here。

示例片段

.parentElement {
display: flex;
flex-direction: row;
flex: 1 1 0%;
gap: 1rem;
}
.childElement {
display: flex;
background-color: yellow;
}

<div id="HorizontalParentElement" class="parentElement">
  <div class="childElement">
    Child 1
  </div>
  <div class="childElement">
    Child 2
  </div>
  <div class="childElement">
    Child 3
  </div>
  <div class="childElement">
    Child 4
  </div>
</div>

片段说明

• 父div元素调整自身大小以适应内容，并将其排列成行或“水平”排列。
• 子元素的格式自动设置为行。