0

Сделал модальное окно, пользователи в него выводятся, но проблема в том, что они выводятся в ряд, как можно сделать чтобы новый пользователь, новая строка(\n не работает, просто ставит пробел). Может в css как то добавить, или только в js можно?

const addUserToModalWindow = () => {
  const contentWindow = document.querySelector(".usersList");
  socket.on('users', (users) => {
    users.forEach((item) => {
      contentWindow.innerHTML += `${item}` + '\n';
    });
  });
}

Вот как выводится введите сюда описание изображения

3
  • 1
    Возьми каждого пользователя сунь в отдельный тег, и стилизуй как душе угодно
    – Air
    12 янв 2022 в 18:57
  • Подскажите как это сделать? добавить span перед ${item}? 12 янв 2022 в 19:04
  • 1
    Можете просто сделать <div>${item}</div> или ${item}</br>
    – Simon
    12 янв 2022 в 19:06

1 ответ 1

1

Сделал вам пример тегов, в которые можно обернуть юзеров и увидеть как они будут выводиться.

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
<div class="usersList">
  User<br>
  User<br>
  User<br>
  User<br>
  User<br>
</div>

<hr>

<div class="usersList">
  <span>User</span>
  <span>User</span>
  <span>User</span>
  <span>User</span>
  <span>User</span>
</div>

<hr>

<div class="usersList">
  <div>User</div>
  <div>User</div>
  <div>User</div>
  <div>User</div>
  <div>User</div>
</div>

<hr>

<ul class="usersList">
  <li>User</li>
  <li>User</li>
  <li>User</li>
  <li>User</li>
  <li>User</li>
</ul>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.