实现自适应文章元数据：列表项换行且内容垂直居中

嘿，我来帮你搞定这个文章元数据的自适应问题！你遇到的两难情况我太懂了——要么能让列表项正常换行但没法垂直居中内容，要么能实现垂直居中但列表项的换行逻辑不对。咱们用个结合方案来完美解决它：

核心思路 #

我们要让每个<li>保持**行内块（inline-block）的自动换行特性，同时给<li>内部加上弹性布局（inline-flex）**来实现内容垂直居中，并且允许<li>内部的内容（比如多分类链接）在自身范围内换行，而不是把整个<li>挤到新行。

完整实现代码 #

CSS 代码

article { 
  max-width: 450px; 
  background: #eee; 
  font-family: arial; 
  font-size: 12px; 
  text-transform: uppercase; 
  padding: 10px; /* 增加内边距提升视觉体验 */
}
article a { text-decoration: none; }
.entry-meta { 
  list-style: none; 
  margin: 0; 
  padding: 0; 
}
.entry-meta li { 
  display: inline-block; /* 保留行内元素的自动换行特性 */
  margin-right: 10px; 
  margin-bottom: 5px; /* 换行后增加间距，避免拥挤 */
  background: #ccc; 
  padding: 4px 6px; /* 内边距让内容不贴边 */
  vertical-align: middle; /* 确保不同高度的li之间垂直对齐 */
}
.entry-meta li {
  display: inline-flex; /* 让li内部变成弹性容器 */
  align-items: center; /* 内部元素垂直居中 */
  flex-wrap: wrap; /* 允许内部内容换行 */
  gap: 4px; /* 子元素之间的间距，替代 更灵活 */
}
.avatar { 
  width: 25px; 
  height: 25px; 
  border-radius: 100%; 
  background: #FA7059; 
}
.icon { 
  width: 13px; 
  height: 13px; 
  background: #BE4C4E; 
}

HTML 代码

<article>
  <ul class="entry-meta">
    <li class="author">
      <div class="avatar"></div>
      <span>By</span>
      <a href="#">Admin</a>
    </li>
    <li class="date">
      <span>On</span>
      <time>Feb 22, 2019</time>
    </li>
    <li>
      <span>On</span>
      <a href="#">2 Comments</a>
    </li>
    <li class="categories">
      <span class="icon"></span>
      <a href="#">Food</a>
      <a href="#">Nature</a>
      <a href="#">People</a>
      <a href="#">Travel</a>
      <a href="#">Trends</a>
      <a href="">Business</a>
      <a href="">Sport</a>
      <a href="">Music</a>
      <a href="">Gadgets</a>
      <a href="#">Uncategorized</a>
    </li>
    <li class="tags">
      <span class="icon"></span>
      <a href="">Red</a>
      <a href="">Blue</a>
      <a href="">Green</a>
      <a href="">Yellow</a>
    </li>
  </ul>
</article>

关键细节说明 #

• display: inline-block 给 <li>：让列表项像行内元素一样自动换行，同时支持设置内边距、外边距等块级样式。
• display: inline-flex + align-items: center：让每个<li>内部的元素（头像、图标、文字、链接）完美垂直居中。
• flex-wrap: wrap：允许<li>内部的内容（比如多分类链接）在空间不足时自动换行，而不是把整个<li>挤到新一行。
• gap: 4px：替代 来控制子元素之间的间距，代码更干净，维护更方便。
• vertical-align: middle：确保不同高度的<li>（比如带头像的和不带的）之间也能保持垂直对齐。

这样设置后，你的文章元数据就能同时满足「列表项自动换行」和「内部内容垂直居中」的需求啦！

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