如何从最后一个元素开始新的 div？答案

【问题标题】：How to start the new div from the last element?如何从最后一个元素开始新的 div？
【发布时间】：2020-11-16 08:27:22
【问题描述】：

如何将and 9 others 与<a> 对齐。因为它是一个“div”，所以它从下一行开始。

我需要添加一个显示其余用户的工具提示。它应该与用户的姓氏保持一致。

预期：

实际：

CSS：

代码：

return (
    <div>
      {allUsers > 0 
        ? (<div>
            {
              displayNames.map((user, index) => {
                return (
                  <a
                    key={user.id}
                  >
                    {name}
                  </a>
                );
              })
            }
            {
              users.length > 0
                && (
                  <TooltipLabel
                    text={tooltipTextWrapper('TODO')}
                    html={true}
                    position={'bottom'}
                    class="common-tooltip-setting"
                  >
                    {` and ${users.length} others`}
                  </TooltipLabel>
                )
            }
          </div>)
        : '-'
      }
    </div>

【问题讨论】：

也许创建一个可运行的 sn-p 比代码截图更好。
我不知道这将如何影响您的工具提示样式，但您可以：a) 将 tooltip-parent 设置为 display: inline; 或 display: inline-block;，b) 使用跨度而不是 div，c)看看在 a 标签周围的 div 上使用 display: flex;。
您是否显示数组中的元素？
是的。它显示了数组中的用户。

标签： html css reactjs

【解决方案1】：

在您的div.common-tooltip-setting 中，添加样式display: inline-block：

<a .. />
<a .. />
<a .. />
<div class="common-tooltip-setting" style="display:inline-block;" ...>
  <div class="rail-text-title">and 9 others</div>
</div>

【讨论】：

【解决方案2】：

由于div 是一个块级元素，它的行为就像在它之前和之后有一个换行符。您可以使用 span 元素代替它作为内联元素，或者您可以使用 css display: inline 使 div 成为内联元素。

【讨论】：