Як вирівняти невпорядкований список у HTML

Автор: John Stephens
Дата Створення: 2 Січень 2021
Дата Оновлення: 28 Листопад 2024
Anonim
Как в HTML сделать выравнивание текста по центру | Уроки HTML, CSS
Відеоролик: Как в HTML сделать выравнивание текста по центру | Уроки HTML, CSS

Зміст

Веб-дизайнери використовують списки "невпорядковані" або "закладки" більше, ніж просто додавання закладок і тексту. Тег 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;}".