如何将文本与图标保持在同一行？

Question

  <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 到下一行。

这是我想要达到的效果。

提前致谢。

Answer 1

删除包装图标和名称元素的 div 标签，以便它们是 flex div 的直接子元素。你现在拥有它的方式只是 in-between 包装器 div 是一个弹性项目，它的子元素不会受到其祖父元素的弹性设置的影响。

如何将文本与图标保持在同一行？

How can I keep text on the same line as an icon?

css

flexbox

reactjs

tailwind-css