Как выровнять неупорядоченный список в HTML

Автор: John Stephens
Дата создания: 1 Январь 2021
Дата обновления: 27 Ноябрь 2024
Anonim
HTML список. Маркированный список. Нумерованный список. Атрибуты списков. HTML5. Урок#6
Видео: HTML список. Маркированный список. Нумерованный список. Атрибуты списков. HTML5. Урок#6

Содержание

Веб-дизайнеры используют неупорядоченные списки или списки закладок для большего, чем просто добавление закладок и текста. HTML-тег, используемый для создания неупорядоченных списков, полезен для создания меню и организации изображений для загрузки JavaScript-кода в презентацию. Изучение, как использовать CSS (Cascading Style Sheet) вместе с этими списками откроет много возможностей веб-дизайна. Выравнивание неупорядоченных списков - очень важный навык для улучшения.


направления

Используйте код CSS для выравнивания неупорядоченных списков в HTML (Jupiterimages / Photos.com / Getty Images)
  1. Откройте файл HTML, который содержит неупорядоченный список, и просмотрите теги и в верхней части кода. Добавить теги> и если их еще нет. Если ваш код содержит тег

  2. где-то после него, и он содержит ссылку на файл CSS, откройте этот файл. Ваш код CSS будет идти между> и или в новой строке вашего файла CSS.

  3. Выровняйте текст внутри закладок, установив свойство text-align вашего тега

      , Это включает в себя теги
    • и
    • определить их как часть единого списка. Когда вы выравниваете текст в теге
        будут затронуты все элементы в списке, но не сам список, слева или справа от страницы. Пример использования кода CSS для установки свойства «text-align», используйте «ul {text-align: right;}». Обратите внимание, что маркеры не будут двигаться вместе с текстом. В этом случае они будут слева.

  4. Выровняйте весь список по левому или правому краю страницы, установив свойство «float» вашего тега.

      , Это свойство влияет на весь список, перемещая его влево или вправо от страницы. Напишите код "ul {float: right;}".

      Вы можете установить это свойство слева или справа, но не по центру.


  5. Оберните ваши теги

      с тегами и создать перенос, который будет центрировать список на странице. Код будет выглядеть так:
      • Элемент списка
      • Элемент списка
      '.

      Тег не будет ничего выравнивать сам по себе; Вы должны использовать CSS, чтобы центрировать все. Добавьте следующий код между тегами> или в своем CSS-файле, чтобы центрировать список: "div {display: block; text-align: center;} ul {display: inline-block; text-align: left;}".