如何将此文本定位在此 <span> 中，使其显示在一行中答案

【问题标题】：How can I position this text in this <span> so it display in a line如何将此文本定位在此 <span> 中，使其显示在一行中
【发布时间】：2020-12-24 03:48:36
【问题描述】：

我有这个<span>，它在下面的图像输出中创建了这个：

        <li>
            <a onClick={onSearchPageClick} role="presentation">
                <span className="icon is-medium">
                    <i className="fas fa-search" />
                </span>{' '}
                Search
            </a>
        </li>

图像输出：

然后我使用span 使用此代码，但文本位于图标下方：

<li>
    <a onClick={onProfilePageClick} role="presentation">
        <span className="icon is-medium">
            <i className="fas fa-user" />
        </span>{' '}
        <div>
            {authUser && Array.isArray(authUser.roles) && authUser.roles.includes(ROLES.USER) ? (
                <div>Dashboard</div>
            ) : (
                <div>Sign in</div>
            )}
    </div>
        </a>
</li>

请告诉我如何做到这一点我已经尝试了几个小时

【问题讨论】：

尝试删除<div>s 之后的<span>。

标签： html reactjs positioning

【解决方案1】：

<span> 标签是内联渲染的，而<div> 标签不是。您可以使用<span>，也可以设置<div> 的样式，例如：

<div style={{display: 'inline'}}>
   // your code goes here
</div>

【讨论】：

【解决方案2】：

这是一个工作示例： https://codesandbox.io/s/zen-sky-zh5tg?file=/src/App.js:0-531

为了创建一个工作示例，我删除了原始代码中发布的一些逻辑

代码只是利用了弹性盒子：

   <li style={{ listStyleType: "none" }}>
      <a onClick={() => console.log("clicked")} style={{ display: "flex", alignItems: "center" }}>
        <span className="icon is-medium">
          <div style={{ marginRight: 5 }}>avatar</div>
        </span>
        <div>{authUser ? <div>Dashboard</div> : <div>Sign in</div>}</div>
      </a>
    </li>

【讨论】：

【解决方案3】：

不要更改代码中的任何内容。只需在锚标签上添加这些 CSS flexbox 属性即可。

li a{
    display:flex;
    align-items:center;
    justify-content:center;
}

事实上，这将使您的 icon 和 sign in 文本在水平和垂直方向上准确对齐。

【讨论】：