#html #css #reactjs
#HTML #css #reactjs
Вопрос:
Как я могу выровнять 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
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 встроенным элементом.