技术咨询：三个span元素无法在同一行显示的问题

问题原因 #

1. span是行内元素，默认不支持设置width和height，你给.info-container设置的宽高不会生效。
2. span内部嵌套了div（块级元素），块级元素默认会撑满父元素宽度，导致span被强制转换为块级表现，最终每个span独占一行。
3. 行内元素嵌套块级元素本身不符合HTML规范，会导致浏览器渲染异常。

解决方案 #

推荐两种简单有效的修改方式：

方式一：使用Flex布局（最简洁）

给父容器.image-container添加flex布局，子元素会自动在同一行排列：

.image-container {
    position: relative;
    width: 600px;
    height: 300px;
    margin: 20px;
    /* 启用flex布局 */
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中（可选） */
}

.info-container {
    position: relative;
    width: 200px;
    height: 280px;
    text-align: center;
}

同时把HTML里的span换成div（符合规范）：

<div class="image-container">
    <div class="info-container">
        <div class="dot"></div>
        <div class="dot-text">Test</div>
    </div>
    <div class="info-container">
        <div class="dot"></div>
        <div class="dot-text">Test</div>
    </div>
    <div class="info-container">
        <div class="dot"></div>
        <div class="dot-text">Test</div>
    </div> 
</div>

方式二：将.info-container设为行内块级元素

如果不想用flex，给.info-container设置display: inline-block，让它保持行内排列同时支持宽高：

.image-container {
    position: relative;
    width: 600px;
    height: 300px;
    text-align: center;
    margin: 20px;
}

.info-container {
    position: relative;
    width: 200px;
    height: 280px;
    text-align: center;
    /* 设置为行内块级 */
    display: inline-block;
    vertical-align: top; /* 避免元素错位 */
}

同样建议把HTML中的span替换为div，避免规范问题。

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