如何用display属性实现标题同行对齐？求助排查失效原因

我已经用display: flex;完成元素对齐，尝试通过text-align: justify;和display: block;让标题（h3）与图标等元素处于同一行，但该操作仍未生效。请问问题出在哪里？

我的相关代码： #

CSS部分：

.pos-container { list-style: none; padding-top: 40px; padding-bottom: 60px; display: block; }
.pos-info { display: inline-flex; float: left; }
.pos-info:before { display: block; height: 1px; background-color: #045d71; content: " "; width: 90%; margin: 0 auto; }
.pos-image { border-radius: 3px; width: 47%; height: 50%; }
.pos-container i { font-size: 180%; color: #07a0c3; margin-top: 150px; margin-left: 40px; display: block; }
.pos-info h3 { display: inline-block; font-size: 110%; text-align: left; margin-left: 40px; float: left; column-width: auto; }
.pos-content { display: flex; text-align: justify; margin-top: 69px; float: right; margin-left: -118px; margin-bottom: 80px; }
.pos-content:after { display: block; height: 0.1px; background-color: #045d71; content: " "; width: 90%; margin: 0 auto; }

HTML部分：

<div class="row">
<ul class="pos-container">
<li class="pos-info">
<img class="pos-image" src="resources/img/cashier2.jpg" alt="pos picture">
<i class="ion-arrow-left-b"></i>
<h3>POS Software</h3>
<p class="pos-content">We offer a payment solution which functions on the cloud. It gives you access to your inventory, expenses, sales and operations from wherever you are located. It is designed for simplicity, so your employees won’t need any special training to use the software. In case of a bad connection to the internet, the payment system will still work normally and would update every captured payment and transaction, once the connection is restored. A cheap and affordable solution for any type of restaurant, bar or lounge with available payment plans.
</p>
</li>
</ul>
</div>

嘿，我来帮你排查下问题所在，其实你的代码里有几个冲突的属性导致图标和H3没法同行：

问题1：块级元素强制换行 #

你给图标设置了display: block;，块级元素的核心特性就是独占一行，这直接把H3挤到了下一行，这是最核心的问题。

问题2：Flex布局与Float属性冲突 #

你给.pos-info同时设置了display: inline-flex;和float: left;——Flex布局和Float是互斥的，Float会完全破坏Flex的布局逻辑，完全没必要同时使用这两个属性。

问题3：伪元素的块级显示干扰布局 #

.pos-info:before设置了display: block;，这个伪元素会单独占据一行，把后面的图片、图标、H3都挤到了它的下方，直接打乱了你的内容行结构。

修复方案 #

我们调整几个关键属性，让图标和H3自然同行：

修改后的CSS：

.pos-container { 
  list-style: none; 
  padding-top: 40px; 
  padding-bottom: 60px; 
  display: block; 
}
.pos-info { 
  display: flex; /* 用标准flex替代inline-flex，移除干扰的float:left */
  align-items: flex-start; /* 让元素顶部对齐，可按需调整 */
  gap: 40px; /* 用gap统一控制元素间距，替代零散的margin-left */
}
/* 把顶部分隔线伪元素移到容器上，避免干扰内容行 */
.pos-container:before { 
  display: block; 
  height: 1px; 
  background-color: #045d71; 
  content: " "; 
  width: 90%; 
  margin: 0 auto 40px; /* 加底部margin和内容拉开距离 */
}
.pos-image { 
  border-radius: 3px; 
  width: 47%; 
  height: auto; /* 用auto保持图片比例，避免变形 */
}
.pos-container i { 
  font-size: 180%; 
  color: #07a0c3; 
  margin-top: 150px; 
  /* 移除display:block，图标默认是inline-block，能和H3自然同行 */
}
.pos-info h3 { 
  font-size: 110%; 
  text-align: left; 
  margin-top: 150px; /* 和图标保持一致的顶部间距 */
  /* 移除float:left和display:inline-block，flex容器下元素会自动同行 */
}
.pos-content { 
  text-align: justify; 
  margin-top: 69px; 
  width: 100%; /* 让内容占满宽度，移除干扰的float和负margin */
  margin-bottom: 80px; 
}
.pos-content:after { 
  display: block; 
  height: 0.1px; 
  background-color: #045d71; 
  content: " "; 
  width: 90%; 
  margin: 40px auto 0; /* 加顶部margin和内容拉开距离 */
}

调整后的核心逻辑：

1. 给.pos-info用标准的flex布局，利用Flex的特性让子元素（图片、图标、H3）在同一行有序排列；
2. 移除图标和H3上所有会导致换行的属性（display:block、float:left）；
3. 把顶部分隔线伪元素移到容器层级，不再干扰内容行的布局；
4. 用gap属性统一控制元素间距，让布局更整洁易维护；
5. 清理.pos-content上的冗余浮动和负margin，让段落正常占据整行宽度。

这样调整后，图标和H3就能稳稳地处于同一行啦～

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