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

【问题标题】：How can I keep text on the same line as an icon?如何将文本与图标保持在同一行？
【发布时间】：2020-12-02 06:25:57
【问题描述】：

  <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 的问题将转到下一行。

这是我想要实现的外观。

提前谢谢你。

【问题讨论】：

将 flex 添加到以 iconButton 为子元素的 div 中，即代码中的第二个 div。
奇怪的工作，但我没有在顶部得到它我说我的所有成员都应该在父母中灵活。我有什么要说的孩子再次弯曲
如果你让一个元素伸缩，只有你的子元素可以使用伸缩属性，而不是所有的后代。

标签： css reactjs flexbox tailwind-css

【解决方案1】：

删除包裹图标和名称元素的div 标记，使它们成为flex div 的直接子元素。您现在的方式只是中间包装 div 是一个弹性项目，其子项不会受到其祖父元素的弹性设置的影响。

【讨论】：