如何将文本保持在与图标相同的行中？

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>

这个问题，它的无名氏，它将进入下一行。

​

​

这就是我想要达到的样子。

​

​

提前谢谢你。

Answer 1

删除包装图标和名称元素的div标记，以便它们是flex div的直接子元素。您现在只知道，中间的包装器div是一个flex项，它的子元素不会受到其祖父母元素的flex设置的影响。