Ul li html: Тег | htmlbook.ru

Leave a Comment / Html / By /

Тег HTML маркированный список

Рейтинг: 4 из 5, голосов 7

02 октября 2019 г.

Тег <ul> в HTML определяет маркированный список (неупорядоченный список).

Маркированный список широко используется к коде HTML страниц. Помимо прямого применения тега <ul> для структурирования данных в виде маркированных списков, связку <ul> — <li> часто используют для верстки меню сайта, как одноуровневого, так и многоуровневого.

Вид маркера, отображаемого возле пунктов списка <ul> можно задать с помощью CSS свойств.

Элемент списка определяется тегом <li> и должен находиться внутри тега <ul>.

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

Помимо маркированного списка в HTML можно создать нумерованный список. Для этого следует использовать тег <ol>.

Тип маркера, его положение можно изменить при помощи CSS свойств.

Подробнее на странице: Создание списков. Все о HTML списках.

Синтаксис

<ul>элементы_списка_li</ul>

Отображение в браузере

  • Меркурий
  • Венера
  • Земля
  • Марс
  • Юпитер
  • Сатурн
  • Уран
  • Нептун

Пример использования <ul> в HTML коде

<!DOCTYPE html>
<html>
<head>
<title>Маркированный список ul в HTML</title>
</head>
<body>
<ul>
<li>Меркурий</li>
<li>Венера</li>
<li>Земля</li>
<li>Марс</li>
<li>Юпитер</li>
<li>Сатурн</li>
<li>Уран</li>
<li>Нептун</li>
</ul>
</body>
</html>

Поддержка браузерами

Тег
<ul> Да Да Да Да Да

Атрибуты тега <ul>

В HTML5 тег <ul> не имеет атрибутов. При необходимости используйте CSS. Тег <ul> также поддерживает глобальные HTML атрибуты.

Устаревшие атрибуты

Атрибут Значение Описание
compact

compact
пусто

 Логический атрибут. Указывает, что список должен быть выведен меньшим размером шрифта.
type

disc
square
circle

 Определяет тип маркера пунктов списка.

by Lebedev

| HTML | WebReference

  • Содержание
    • Синтаксис
    • Закрывающий тег
    • Атрибуты
    • Пример
    • Спецификация
    • Браузеры

Элемент <ul> (от англ. unordered list — неупорядоченный список) устанавливает маркированный список. Каждый пункт списка должен начинаться с элемента <li>.

Синтаксис

<ul>
  <li>пункт маркированного списка</li>
</ul>

Закрывающий тег

Обязателен.

Атрибуты

type
Устанавливает вид маркера списка.

Также для этого элемента доступны универсальные атрибуты и события.

Пример

<!DOCTYPE HTML> <html> <head> <meta charset=»utf-8″> <title>UL</title> </head> <body> <ul> <li>Баал</li> <li>Агарес</li> <li>Марбас</li> <li>Пруфлас</li> <li>Аамон</li> </ul> </body> </html>

Результат данного примера показан на рис. 1.

Рис. 1. Вид маркированного списка в браузере

Спецификация

СпецификацияСтатус
WHATWG HTML Living StandardЖивой стандарт
HTML5Рекомендация
HTML 4. 01 SpecificationРекомендация

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации) — первая черновая версия стандарта.

Особняком стоит живой стандарт HTML (Living) — он не придерживается традиционной нумерации версий, поскольку находится в постоянной разработке и обновляется регулярно.

Браузеры

1121111
1161

Браузеры

В таблице браузеров применяются следующие обозначения.

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

Число указывает версию браузреа, начиная с которой элемент поддерживается.

Списки

См. также

  • <li>
  • <ol>
  • Вложенные списки
  • Группа списков
  • Маркированные списки
  • Нумерация страниц
  • Нумерованные списки
  • Создание списков
  • Списки
  • Текст в HTML

Рецепты

  • Как сделать вложенный список?
  • Как сделать нумерацию римскими цифрами?
  • Как сделать нумерацию русскими буквами?
  • Как сделать нумерацию списка с определённого числа?
  • Как сделать нумерованный список?

Практика

  • Атрибут value
  • Буквенная нумерация
  • Вложенный список
  • Маркированный список
  • Навигация
  • Нумерованный список
  • Обратный список
  • Римские числа
  • Список с 11

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 10. 10.2018

Редакторы: Влад Мержевич

html — Как контролировать положение текста?

спросил

Изменено 1 год, 9 месяцев назад

Просмотрено 237 раз

При работе с тегом

  • я столкнулся с основной проблемой.

    Вот скриншот, вызывающий проблему.

    Вот идеальный формат, который мне нужен.

    Я думаю, что могу просто управлять этим, используя свойство CSS тега

  • .

    • HTML
    • CSS

    1

    Вместо того, чтобы включать свой тег в каждый li , вы можете установить стиль маркера с помощью list-style-type . Установка значения более низкая альфа- будет маркировать элементы списка строчными буквами. Так как маркеры стилизованы, линии сохранят свои первоначальные стили обтекания и отступов.

     .уль-альфа ли {
  тип стиля списка: нижняя альфа;
} 
     <ул>
  
  • а. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus fringilla, sem in maximus fringilla, metus lorem fringilla diam, in gravida.
    •   
  • б. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus fringilla, sem in maximus fringilla, metus lorem fringilla diam, in gravida.
    • 
  
  • с. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus fringilla, sem in maximus fringilla, metus lorem fringilla diam, in gravida.
    • 
  
  • д. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus fringilla, sem in maximus fringilla, metus lorem fringilla diam, in gravida.
    •
<ул>
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus fringilla, sem in maximus fringilla, metus lorem fringilla diam, in gravida.
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus fringilla, sem in maximus fringilla, metus lorem fringilla diam, in gravida.
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus fringilla, sem in maximus fringilla, metus lorem fringilla diam, in gravida.
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus fringilla, sem in maximus fringilla, metus lorem fringilla diam, in gravida.

    • Вместо использования list-style-position: inside; вам может понадобиться поиграть со значением padding-left .
    Я также использовал

      вместо
        здесь, так как в вашем примере у вас есть упорядоченный список 

         ol {
  отступ слева: 0;
}
.список-1 {
  позиция стиля списка: внутри;
}
.список-2 {
  отступ слева: 16px;
} 
         <ол>
  
      • Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut Labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco Laboris nisi ut aliquip ex ea commodo consequat.
          
        • 
  
      • Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut Labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco Laboris nisi ut aliquip ex ea commodo consequat.
        •
    <ол>
  • Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut Labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco Laboris nisi ut aliquip ex ea commodo consequat.
  • Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut Labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco Laboris nisi ut aliquip ex ea commodo consequat.

    • html — ul li для выравнивания и выравнивания по левой стороне блока div

    Я пытаюсь выровнять список параметров слева от блока div.

    на данный момент это то что у меня есть:
    HTML-код:

     
     
    
                <ул>
                    
  • ВСЕ  png">
    • 
                    
  • РАЗВИТИЕ СООБЩЕСТВ 
    • 
                    
  • СПОРТ 
    • 
                    
  • ОБРАЗОВАНИЕ 
    •

    код CSS:

     #categorylist{
      поле слева: авто;
      поле справа: авто;
      дисплей: таблица;
  }
  #категориялист ул {
      выравнивание текста: по левому краю;
  }

    Чего я хочу добиться, так это:

    Будем очень признательны за любую помощь и предложения

    • html
    • css

    3

    Вы можете сделать список категорий ul , text-align:right ; вместо оставил 

     #categorylist{
      поле слева: авто;
      поле справа: авто;
      дисплей: таблица;
  }
  #категориялист ул {
      выравнивание текста: вправо;
  } 
     <дел>
                <ул>
                    
  • ВСЕ  png">
    • 
                    
  • РАЗВИТИЕ СООБЩЕСТВ 
    • 
                    
  • СПОРТ 
    • 
                    
  • ОБРАЗОВАНИЕ 
    •

    Попробуйте это, для UL вы должны указать text-align right, а для li list style — нет. Я тестировал в jsFiddle, и он работает. Дайте мне знать, если это работает для вас.

     #категориялист{
     поле слева: авто;
     поле справа: авто;
     дисплей: таблица;
}
#категориялист ул {
     выравнивание текста: вправо;
}
#категориялист уль ли {
     стиль списка: нет;
}
 
     #категориялист{
      маржа: авто;
      дисплей: таблица;
  }
  #категориялист ул {
      выравнивание текста: по левому краю;
  }

    Изменить стиль выравнивание текста: по левому краю; К выравнивание текста: по правому краю; в #categorylist ul Класс

    Вы должны изменить свой код с этим.

     

    <голова>
        <стиль>
            <стиль>
            #категориялист{
                поле слева: авто;
                поле справа: авто;
                дисплей: таблица;
            }
            #категориялист ул {
                выравнивание текста: по левому краю;
            }
            #категориялист li{
                тип-стиля-списка: нет;}
            .image-список {поле-справа: 10px;}
        
    
    <тело>
    <тело>
        <дел>
            <ул>
                
  • 
                    ВСЕ
                
    • 
                
  • 
                    РАЗВИТИЕ СООБЩЕСТВА
                
    • 
                
  • 
                    СПОРТ
                
    • 
                
  • 
                    ОБРАЗОВАНИЕ
                
    •

    Надеюсь, это вам поможет.