html - 如何将此文本放置在其中以使其显示在一行中

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>

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

标签： htmlreactjspositioning

Answer 1

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

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