如何解决添加右对齐文本时,页眉组件向左对齐文本
我有一个标头组件(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。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。