React代码如何实现LearnMoreButton与h4文本同行对齐 现有LearnMore显示在新行

问题原因 #

默认<h4>属于块级元素，渲染时会独占整行宽度，因此后续的LearnMoreButton组件会自动被挤到下一行显示。

解决方案 #

方案1：Flex容器包裹（推荐，对齐灵活度最高）

修改JSX结构，新增flex容器包裹<h4>和按钮组件，直接控制横向排列和垂直对齐效果：

const Header: React.FC<Props> = ({ copy }: Props) => {
    if (isUndefined(copy)) return null;
    return (
        <Container>
            <img src={HeartCircle} />
            <Text>
                {/* 新增flex容器 */}
                <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
                    <h4>{copy.recommended.subheading}</h4>
                    <LearnMoreButton>
                        <RecommendedProviderLabel
                            isRecommendedProvider={true}
                            showIcon={false}
                            label={copy.ctas.learnMore}
                        />
                    </LearnMoreButton>
                </div>
            </Text>
        </Container>
    );
}

样式说明：

• display: flex 让容器内子元素横向排列
• alignItems: center 实现两个元素垂直居中对齐，也可以按需调整为flex-start顶对齐、flex-end底对齐
• gap 控制两个元素的横向间距，可根据视觉需求调整数值
  如果项目用样式类、CSS-in-JS方案，把行内样式替换为对应的样式规则即可。

方案2：修改元素默认display属性（无需改JSX结构）

给<h4>和LearnMoreButton添加行内块属性，让二者可以在同一行渲染：

/* 对应样式规则 */
h4 {
  display: inline-block;
  /* 清除h4默认上下外边距，避免错位，同时设置右边距和按钮隔开 */
  margin: 0 8px 0 0;
  vertical-align: middle;
}
.learn-more-btn {
  display: inline-block;
  vertical-align: middle;
}

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