如何使用inline-grid实现图标与文字在同一行显示

问题原因 #

你当前代码里.code-block设置了display: inline-grid，grid布局默认子元素会各自占满一行，所以导致文字和图标分成了两行。

解决方案 #

只需要修改CSS代码即可，HTML部分无需调整，修改后的完整CSS如下：

.code-block {
  /* 替换原有inline-grid为inline-flex，实现子元素横向排列 */
  display: inline-flex;
  /* 控制子元素垂直方向对齐，这里设置为居中对齐 */
  align-items: center;
  /* 文字和图标之间的间距，可按需调整数值 */
  gap: 6px;
  background-color: #232323;
  border-radius: 5px;
  padding: 5px;
  margin-bottom: 7px;
}

.code-block code {
  color: #008a00;
}

.code-block .icons {
  width: 14px;
  height: 14px;
}

补充说明 #

如果你需要调整对齐效果，可以修改align-items的属性值：

• 设为flex-start即可实现顶部对齐
• 设为flex-end即可实现底部对齐
• 设为center即可实现居中对齐

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