为何inline-block在我的代码中无法生效，仅inline-flex可用？

我给<div id="account_corner">设置了display: inline-block但达不到预期布局效果，换成display: inline-flex才实现了想要的横向排列效果。相关代码如下：

原CSS代码 #

#account_corner {
  display: inline-block;
  position: relative;
  vertical-align: top;
  float: none;
  white-space: nowrap;
}

原HTML代码 #

<div id="account_corner">
  <img style="height: 40px;" alt="account_photo" src="https://media.istockphoto.com/id/1300845620/vector/user-icon-flat-isolated-on-white-background-user-symbol-vector-illustration.jpg?s=612x612&amp;w=0&amp;k=20&amp;c=yBeyba0hUkh14_jgv1OKqIH0CCSWU_4ckRkAoy2p73o=">

  <div style="display: block;">
    <span style="margin: 0 5px;">Example</span>
    <p style="margin: 0 5px;">example@example.com</p>
  </div>

  <button onclick="/logout'">Logout</button>
</div>

核心原因 #

inline-block和inline-flex的布局逻辑本质不同：

• inline-block仅让当前元素本身变为行内块级元素（可以和其他行内元素并排），但内部子元素依然遵循常规块级流，默认垂直排列，不会改变子元素的排布方向。
• inline-flex是将当前元素变为行内的flex容器，内部子元素会自动遵循flex布局规则（默认横向排列），这正好匹配你需要的横向布局需求。

解决方案 #

方案1：用inline-block实现等效效果 #

需要给所有子元素也设置inline-block，强制它们横向排列，并调整对齐方式：

#account_corner {
  display: inline-block;
  position: relative;
  vertical-align: top;
  float: none;
  white-space: nowrap;
}
/* 给内部所有子元素设置行内块，强制横向排列 */
#account_corner > img,
#account_corner > div,
#account_corner > button {
  display: inline-block;
  vertical-align: middle; /* 让元素垂直居中对齐 */
  margin: 0 4px;
}

方案2：直接使用inline-flexbox（更推荐） #

flex布局对横向/纵向排列的控制更灵活，代码更简洁：

#account_corner {
  display: inline-flex;
  align-items: center; /* 子元素垂直居中，比vertical-align更可控 */
  gap: 8px; /* 子元素之间的统一间距，替代零散margin */
  white-space: nowrap;
}

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