Блог

Главная - Вопросы по программированию - Как запустить новый div с последнего элемента?

Как запустить новый div с последнего элемента?

#html #css #reactjs

#HTML #css #reactjs

Вопрос:

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

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

Ожидаемый :

Ожидаемый

Актуально :

Актуально

CSS: CSS

Код:

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

Комментарии:

1. Возможно, создание пригодного для выполнения фрагмента кода лучше, чем скриншот кода.

2. Я не знаю, как это повлияет на ваш стиль всплывающей подсказки, но вы могли бы: а) оформить tooltip-parent как display: inline; или display: inline-block; , б) использовать промежутки вместо divs, в) посмотрите на использование display: flex; в div, окружающих теги a.

3. вы отображаете элементы из массива?

4. ДА. Он показывает пользователей из массива.

Ответ №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 встроенным элементом.