如何让HTML中h3与p标签内容显示在同一行？

现有如下HTML代码：

<h3>City </h3>
<p>London</p>

对应的CSS样式：

.details>h3{
    color: #ffffff;
    font-weight: 600;
    font-size: 18px;
    margin: 10px 0 15px 0;
}
.details>p{
    color: #a0a0a0;
    font-size: 15px;
    line-height: 30px;
    font-weight: 400;
    text-align: justify;
}

当前City和城市名称分两行显示，需要让二者处于同一行。

解决方案1：修改元素的display属性 #

h3和p都是块级元素，默认会独占一行。只需将它们的display设为inline-block，就能让它们在同一行排列，同时保留块级元素的盒模型特性：

.details>h3, .details>p {
    display: inline-block;
    vertical-align: middle; /* 让元素垂直居中，视觉更协调 */
}
/* 微调h3的右侧margin，避免元素间距过大 */
.details>h3 {
    margin-right: 5px;
}

如果用inline替代inline-block，要注意块级元素的margin、padding等属性会受行内元素规则影响，inline-block是更稳妥的选择。

解决方案2：调整HTML结构（语义化优先） #

从语义角度，City是标签，London是对应的值，用<span>替代<p>更合理，或者将内容整合到同一个h3标签内：

<h3>City <span>London</span></h3>

然后修改CSS样式：

.details>h3 {
    color: #ffffff;
    font-weight: 600;
    font-size: 18px;
    margin: 10px 0 15px 0;
}
.details>h3 span {
    color: #a0a0a0;
    font-size: 15px;
    line-height: 30px;
    font-weight: 400;
    margin-left: 5px;
}

这种方式避免了不必要的块级元素嵌套，更符合HTML语义规范。

解决方案3：使用Flex布局 #

给父容器.details设置Flex布局，子元素会自动横向排列，还能轻松实现垂直对齐：

.details {
    display: flex;
    align-items: center; /* 垂直居中对齐元素 */
    gap: 5px; /* 控制元素间的间距 */
}
/* 去掉h3的底部margin，避免整体区域间距异常 */
.details>h3 {
    margin-bottom: 0;
}

Flex布局灵活性强，适合应对各类复杂排版场景。

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