Как я могу выровнять and 9 others в продолжение с <a>. Поскольку это «div», он начинается со следующей строки.

Мне нужно добавить всплывающую подсказку, которая показывает остальных пользователей. И это должно быть продолжением фамилий пользователей.

Ожидается:

Expected

Актуально:

Actual

CSS: 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>
-2
vikas95prasad 16 Ноя 2020 в 11:27

2 ответа

Лучший ответ

В своем 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>

0
Aadil Mehraj 16 Ноя 2020 в 08:32

Поскольку div является элементом уровня блока, он будет вести себя так, как если бы перед ним и после него был разрыв строки. Вместо этого вы можете использовать элемент span, который является встроенным, или использовать css display: inline, чтобы сделать div встроенным элементом.

0
red-X 16 Ноя 2020 в 08:32