我想将 LearnMoreButton 文本与 h4 文本对齐。与现有的，了解更多显示在下一行答案

【问题标题】：I want to align the LearnMoreButton text next to h4 text. With the existing, the learn more shows in next line我想将 LearnMoreButton 文本与 h4 文本对齐。与现有的，了解更多显示在下一行
【发布时间】：2021-12-22 14:00:42
【问题描述】：

const Header: React.FC<Props> = ({ copy }: Props) => {
    if (isUndefined(copy)) return null;
    return (
        <Container>
            <img src={HeartCircle} />
            <Text>
                <h4>{copy.recommended.subheading}</h4>
                    <LearnMoreButton>
                        <RecommendedProviderLabel
                            isRecommendedProvider={true}
                            showIcon={false}
                            label={copy.ctas.learnMore}
                        />
                    </LearnMoreButton>
            </Text>
        </Container>
    );

【问题讨论】：

如果<Text style={{display: 'flex'}}> 而不是<Text> 怎么办？
你试过什么css？可以提供截图吗？或者更好的是，我们可以编辑的可运行示例？

标签： javascript html css reactjs components

【解决方案1】：

你可以使用display flex

flexRow: {
    display: flex;
  }

<div className={classes.flexRow}>
          <img src={HeartCircle} />
          <Text>
                <h4>{copy.recommended.subheading}</h4>
                    <LearnMoreButton>
                        <RecommendedProviderLabel
                            isRecommendedProvider={true}
                            showIcon={false}
                            label={copy.ctas.learnMore}
                        />
                    </LearnMoreButton>
            </Text>
        </div>

【讨论】：