如何用HTML/CSS实现Box容器内元素横向并排显示？

要实现带绿色背景的数字“1”和“New Referral”文本横向并排，最简便的方式是利用CSS Flexbox布局，或者将数字设为行内/行内块元素。以下是具体实现代码：

HTML 代码 #

<div class="box">
  <span class="badge">1</span>
  <span class="text">New Referral</span>
</div>

CSS 代码 #

.box {
  /* 使用flex布局让子元素横向排列 */
  display: flex;
  align-items: center; /* 垂直居中对齐 */
  gap: 8px; /* 数字和文本之间的间距 */
  padding: 8px 12px;
  border: 1px solid #eee;
  border-radius: 4px;
}

.badge {
  background-color: green;
  color: white;
  width: 24px;
  height: 24px;
  border-radius: 50%; /* 可选：让数字背景变成圆形 */
  display: flex;
  align-items: center;
  justify-content: center;
}

.text {
  color: #333;
}

关键说明 #

• 将数字和文本分别用<span>包裹（行内元素默认不会换行），再通过父容器的display: flex强制横向排列，同时可以轻松实现垂直居中。
• 如果你的原有代码中使用了<div>这类块级元素包裹数字或文本，块级元素默认会独占一行，这是导致无法并排的常见原因，换成<span>或给块级元素添加display: inline-block也能解决问题。
• gap属性用于控制两个元素之间的间距，避免内容挤在一起。

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