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

Posted 2023-02-23

【中文标题】我想将 LearnMoreButton 文本与 h4 文本对齐。与现有的，了解更多显示在下一行

【英文标题】：I want to align the LearnMoreButton text next to h4 text. With the existing, the learn more shows in next line

【发布时间】：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？可以提供截图吗？或者更好的是，我们可以编辑的可运行示例？

【参考方案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>