如何使用CSS将所有border-radius形状（含圆形）对齐到同一行

问题结论 #

这个现象是正常的CSS默认渲染行为，不属于代码错误。

问题原因 #

你使用inline-block作为元素的展示类型，这类元素默认的垂直对齐规则是vertical-align: baseline，也就是按元素内部最后一行文本的基线对齐：

• 其余三个形状内的文字是单行，基线位置一致
• 圆形形状内的文字Circle Shape受100px宽度限制自动折为两行，基线位置比单行文字更低，因此整体视觉上会向下偏移，无法和其他元素对齐。

解决方案 #

有两种常用的修复方案，按需选择即可：

方案1：调整inline-block元素的垂直对齐规则 #

给所有形状元素统一添加vertical-align属性，指定顶部/中间对齐即可：

/* 给四个形状类添加公共样式 */
.rounded-edges, .circle-shape, .top-bottom, .bottom-top {
  vertical-align: middle; /* 也可以替换为top，按你的对齐需求选择 */
  margin-right: 8px; /* 可选，控制元素之间的间距 */
}

方案2：使用Flex布局（更推荐） #

给包裹四个形状的父容器添加Flex布局规则，天然解决同行对齐问题，还能避免inline-block自带的元素间隙问题：

div {
  display: flex;
  gap: 8px; /* 控制元素之间的间距 */
  align-items: center; /* 可选，所有元素在父容器内垂直居中对齐 */
}

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