Сделать блоки элементов списка с пробелом CSS

Я хочу сделать отдельные блоки с пробелами из элементов списка. В настоящее время между элементами нет расстояния, и я не могу построить нужные блоки. Я приложил изображение, чтобы показать, что я имею в виду.

Что мне нужно сделать в CSS?

li {
  float: left;
  border: 3px solid grey;
}

<ul>
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
</ul>

float убьет любое вертикальное/горизонтальное выравнивание: не используйте его. display может быть сброшен... выглядит как типичное использование flex здесь... или встроенный блок для li

— 13.12.2020 14:40

html css list space

13.12.2020 14:37

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

402

Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Ответ принят как подходящий

Добавьте поля вокруг списков,

ли {поле: 4px; }

13.12.2020 14:41

ul {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}

ul li {
  border: 1px solid black;
  margin: 10px;
}

<ul>
  <li>
    A
  </li>
  <li>
    A
  </li>
  <li>
    A
  </li>
  <li>
    A
  </li>
  <li>
    A
  </li>

</ul>

Ваш HTML-код недействителен. li должен заменить теги p. Попробуйте flex для этой цели. Вы также можете использовать маржу с вашим существующим кодом.

С запасом:

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

ul li {
  border: 1px solid black;
  margin: 10px;
  float: left;
}

<ul>
  <li>
    A
  </li>
  <li>
    A
  </li>
  <li>
    A
  </li>
  <li>
    A
  </li>
  <li>
    A
  </li>

</ul>

13.12.2020 14:43

Используйте сетку CSS

ul {
  margin: 0;
  padding: 0;
  display: grid;
  grid-auto-flow: column;
  justify-content:center;
  gap: 15px;
  list-style:none;
}

li {
 border:1px solid;
}

<ul>
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
</ul>

13.12.2020 15:00

Другие вопросы по теме

Кнопка с полем ввода не хочет выравниваться по правому углу

Создайте анимацию постепенного появления / исчезновения на фоновых изображениях, измените CSS в ответ

Открыть новый кран HTML в Chrome с определенной шириной и высотой

Как я могу масштабировать строки изображений внутри div

JQuery addClass работает, но javascript classList.add не работает

Изменение цвета фона с помощью оператора else if - JQuery

Контейнер Flexbox не включает margin-bottom

Как расположить заголовок раздела так, чтобы он плавал прямо на карточке

Bootstrap выровняет svg по центру заголовка

Добавление изображения логотипа рядом с текстом в div с использованием html и css

Сделать блоки элементов списка с пробелом CSS

Ответы 3

Другие вопросы по теме

Похожие вопросы