如何用block/inline/inline-block实现HTML section横向排列？

现有如下HTML结构：

<div class="sections-div">
    <section class="eachsec">section1</section>
    <section class="eachsec">section2</section>
    <section class="eachsec">section3</section>
</div>

当前使用的CSS：

.sections-div {
    display: inline;
}

当前section元素为纵向显示，需求是让它们横向排列并保持指定间距，以下是基于block、inline、inline-block属性的解决方案：

核心原因说明 #

section元素默认是块级元素（display: block），块级元素会独占一行，因此即便父容器设置display: inline，子元素仍会纵向排列。要实现横向排列，需要修改子元素的display属性。

方法一：使用inline-block（推荐） #

inline-block兼具块级元素可设置宽高、边距的特性，又能像行内元素一样横向排列，适合需要控制间距和元素尺寸的场景。

修改后的CSS：

/* 父容器默认是block，可省略该声明 */
.sections-div {
    /* 可选：若需要子元素居中，可添加 text-align: center; */
}

.eachsec {
    display: inline-block;
    /* 设置右侧间距来拉开元素距离 */
    margin-right: 60px;
}

/* 移除最后一个元素的右侧间距，避免多余留白 */
.eachsec:last-child {
    margin-right: 0;
}

方法二：使用inline #

inline会将元素转为行内元素，横向排列，但行内元素无法设置宽高，间距只能通过父容器的word-spacing或元素间的空格控制。

修改后的CSS：

.sections-div {
    /* 通过word-spacing控制元素间的间距 */
    word-spacing: 60px;
}

.eachsec {
    display: inline;
}

内容的提问来源于stack exchange，提问作者Charith Reddy Yadavelly