如何将此文本放置在此 <span> 中，使其显示在一行中

Question

我有这个 <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>

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

Answer 1

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

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

Answer 2

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

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

事实上，这将使您的 icon 和 sign in 文本在水平和垂直方向上都完全居中对齐。

Answer 3

这是一个工作示例： 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>

如何将此文本放置在此 <span> 中，使其显示在一行中

How can I position this text in this <span> so it display in a line

html

positioning

reactjs