添加右对齐文本时，页眉组件向左对齐文本

问题描述

我有一个标头组件（form ant design react），其中有一个左对齐的标题，并添加了一个右对齐的文本，例如“ Welcome，”：

<Header style={{ padding: 10 }}>
      <Avatar style={{ float: "right" }} src='./dp.png' />
      <Text type='secondary' style={{ color: "white",float: "right" }}>
        {user ? user.attributes.email : ""}
      </Text>
      <Title style={{ color: "white" }} level={3}>
        MyWebAppName
      </Title>
    </Header>

问题是，没有正确的对齐文本，我的标题看起来不错：

<Header style={{ padding: 10 }}>
      <Avatar style={{ float: "right" }} src='./dp.png' />

      <Title style={{ color: "white" }} level={3}>
        MyWebAppName
      </Title>
    </Header>

但是，当我添加右对齐文本时，标题会向下移动原始标题：

我认为这是CSS问题，而不是对Ant设计库的错误使用，但是，我不知道如何解决。

解决方法

将此clear:both; display:table; content'';添加到浮动子div的父div。

antd reactjs reactjs