Как установить список с квадратами в HTML?

Пользователь

от bart , в категории: HTML/CSS , 2 года назад

Как установить список с квадратами в HTML?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

3 ответа

Пользователь

от kendall_mckenzie , 2 года назад

@bart  Если нужен список с квадратами в HTML используйте этот код:


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <ul style="list-style-type: square">
      <li>Фрукты</li>
      <li>Овощи</li>
      <li>Мясо</li>
    </ul>
  </body>
</html>

Пользователь

от linnea , 9 месяцев назад

@bart 

Чтобы создать список с квадратами в HTML, можно использовать теги <ul> и <li> с применением стилей для преобразования маркера в квадрат.


Вот пример кода:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
    ul {
        list-style-type: none; /* Удаление маркеров списка */
        padding-left: 0; /* Удаление отступа слева */
    }
    
    li {
        display: flex; /* Для установки элементов списка в строку */
        align-items: center; /* Для выравнивания содержимого по вертикали */
        margin-bottom: 10px; /* Нижний отступ между элементами списка */
    }
    
    .square {
        width: 20px; /* Ширина квадрата */
        height: 20px; /* Высота квадрата */
        background-color: black; /* Цвет квадрата */
        margin-right: 10px; /* Отступ между квадратом и текстом */
    }



     Элемент списка 1
     Элемент списка 2
     Элемент списка 3


В этом примере мы определяем стили для <ul>, <li> и .square. Квадраты создаются с использованием <div> и класса .square. Класс .square определяет размер и цвет квадрата.

Пользователь

от loyal , 9 месяцев назад

@bart 

Для установки списка с квадратами в HTML вы можете использовать элементы <ul> и <li>. Каждый элемент <li> будет содержать квадрат, который можно создать с помощью CSS.


Пример HTML-разметки для списка с квадратами:

1
2
3
4
5
   Пункт списка 1
   Пункт списка 2
   Пункт списка 3


Пример CSS-стилей для создания квадратов:

1
2
3
4
5
.square {
  width: 20px;
  height: 20px;
  background-color: #000;
}


В этом примере используется класс .square, который задает размеры и цвета квадратов. Вы можете настроить стили по своему усмотрению.


Обратите внимание, что стили могут быть внедрены напрямую в разметку с помощью атрибута style или подключены через внешний файл CSS.