HTML周期表开发：如何让原子序数与原子量同行不换行？

你当前的问题是原子序数和原子量因使用块级div导致换行，要实现二者在同一行、原子序数居左、原子量居右，可按以下方法调整：

调整HTML结构 #

将嵌套的div改为用一个容器包裹原子序数和原子量，内部使用行内元素（如span）避免自动换行：

<th class="hidrogenio">
    <div class="atomic-info">
        <span class="numeroatomico">1</span>
        <span class="massa">1,008</span>
    </div>
    H
    <div class="nome">Hidrogênio</div>
</th>

添加CSS样式 #

推荐用flex布局实现简洁的左右对齐：

.atomic-info {
    /* 开启flex布局 */
    display: flex;
    /* 元素两端对齐，分别居左和居右 */
    justify-content: space-between;
    /* 占满单元格宽度，确保对齐效果生效 */
    width: 100%;
}

如果偏好传统布局方式，也可以用float实现：

.numeroatomico {
    float: left;
}
.massa {
    float: right;
}
/* 清除浮动，避免影响后续元素布局 */
.atomic-info::after {
    content: "";
    display: table;
    clear: both;
}

原理：原代码中的<div class="massa">是块级元素，默认独占一行；换成行内元素（如span）或给div设置display: inline-block，再配合布局属性就能实现同行显示。

内容的提问来源于stack exchange，提问作者user22869143