如何解决如何使文本与图标保持在同一行?
<div className={'bg-blue-700 flex flex-row p-5 items-center justify-between'} >
<div>
<IconButton className={'bg-blue-900 p-5 hover:bg-blue-900 '}>
<Phone className={'text-white'} />
</IconButton>
<div className="text-white">John Doe</div>
</div>
<div>
</div>
</div>
问题出在约翰·多伊(John Doe),要移到下一行。
这是我想要实现的外观。
先谢谢您
解决方法
删除包含图标和名称元素的div
标记,使它们成为flex
div的直接子代。现在,只有包装器div之间的内容才是flex项目,其子项将不受其祖父母元素的flex设置的影响。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。