在CSS布局开发过程中，两个子元素无法水平排列是非常常见的问题，很多开发者明明按照预期设置了属性，最终子元素却依然垂直堆叠显示，影响页面布局效果。
常见原因及解决方法
1. 子元素为块级元素未修改显示属性
HTML中很多元素默认是块级元素，比如<div>、<p>、<h1>到<h6>等，块级元素的默认特性是独占一行，即使宽度没有占满父容器，也会自动换行显示，这是导致两个子元素无法水平排列的最常见原因。
解决方法有两种，一种是修改子元素的display属性为inline-block，让元素同时具备行内元素和块级元素的特性，另一种是给父容器开启弹性布局。
使用inline-block的示例代码如下：
/* 父容器样式 */
.parent {
width: 100%;
height: 200px;
background-color: #f0f0f0;
}
/* 子元素样式，设置为inline-block */
.child {
display: inline-block;
width: 45%;
height: 100px;
background-color: #409eff;
margin: 0 2.5%;
}
对应的HTML结构：
<div class="parent">
<div class="child">子元素1</div>
<div class="child">子元素2</div>
</div>
2. 父容器未正确开启弹性布局
弹性布局（flex布局）是实现水平排列的常用方式，但是如果父容器没有正确设置display: flex属性，或者设置了之后被其他样式覆盖，子元素依然会按照默认规则排列。
正确的弹性布局设置示例：
.parent {
display: flex; /* 开启弹性布局，子元素默认水平排列 */
width: 100%;
height: 200px;
background-color: #f0f0f0;
gap: 20px; /* 子元素之间的间距 */
padding: 0 20px;
box-sizing: border-box;
}
.child {
width: 200px;
height: 100px;
background-color: #409eff;
}
如果父容器开启了弹性布局但是子元素还是垂直排列，需要检查是否设置了flex-direction: column，这个属性会让子元素垂直排列，改成row即可恢复水平排列。
3. 子元素使用浮动但父容器未清除浮动
早期布局常用float属性实现水平排列，如果给子元素设置了float: left或者float: right，但是父容器没有清除浮动，可能会导致布局异常，不过子元素本身是可以水平排列的，这里的问题通常是父容器高度塌陷，看起来像是子元素排列异常。
浮动实现水平排列的示例：
.parent {
width: 100%;
height: auto;
background-color: #f0f0f0;
overflow: hidden; /* 清除浮动的常用方式 */
}
.child {
float: left;
width: 45%;
height: 100px;
background-color: #409eff;
margin: 0 2.5%;
}
4. 子元素总宽度超出父容器宽度
如果子元素的宽度加上内外边距的总和超过了父容器的可用宽度，即使设置了水平排列的属性，子元素也会因为空间不足自动换行，导致无法水平排列。
比如父容器宽度是400px，两个子元素宽度都是250px，加上边距之后总宽度超过400px，就会换行。这时候需要调整子元素的宽度，或者给父容器设置box-sizing: border-box，让内边距和边框的宽度计算在元素总宽度内，避免宽度溢出。
盒模型调整示例：
.parent {
width: 400px;
height: 200px;
background-color: #f0f0f0;
}
.child {
width: 45%;
height: 100px;
background-color: #409eff;
margin: 0 2.5%;
padding: 10px;
box-sizing: border-box; /* 内边距计入宽度，避免总宽度超出 */
}
排查步骤总结
遇到两个子元素无法水平排列的问题时，可以按照以下步骤排查：
- 检查子元素是否为块级元素，是否需要修改
display属性 - 检查父容器是否正确开启了弹性布局，或者浮动属性是否设置正确
- 计算子元素总宽度是否超出父容器可用宽度
- 检查是否有其他样式覆盖了布局相关的属性
通过以上步骤基本可以快速定位问题，实现两个子元素的水平排列效果。