Содержание
Веб-дизайнеры используют неупорядоченные списки или списки закладок для большего, чем просто добавление закладок и текста. HTML-тег, используемый для создания неупорядоченных списков, полезен для создания меню и организации изображений для загрузки JavaScript-кода в презентацию. Изучение, как использовать CSS (Cascading Style Sheet) вместе с этими списками откроет много возможностей веб-дизайна. Выравнивание неупорядоченных списков - очень важный навык для улучшения.
направления
Используйте код CSS для выравнивания неупорядоченных списков в HTML (Jupiterimages / Photos.com / Getty Images)-
Откройте файл HTML, который содержит неупорядоченный список, и просмотрите теги и в верхней части кода. Добавить теги> и если их еще нет. Если ваш код содержит тег
- где-то после него, и он содержит ссылку на файл CSS, откройте этот файл. Ваш код CSS будет идти между> и или в новой строке вашего файла CSS.
-
Выровняйте текст внутри закладок, установив свойство text-align вашего тега
- , Это включает в себя теги
- и определить их как часть единого списка. Когда вы выравниваете текст в теге
- будут затронуты все элементы в списке, но не сам список, слева или справа от страницы. Пример использования кода CSS для установки свойства «text-align», используйте «ul {text-align: right;}». Обратите внимание, что маркеры не будут двигаться вместе с текстом. В этом случае они будут слева.
-
Выровняйте весь список по левому или правому краю страницы, установив свойство «float» вашего тега.
- , Это свойство влияет на весь список, перемещая его влево или вправо от страницы. Напишите код "ul {float: right;}".
Вы можете установить это свойство слева или справа, но не по центру.
-
Оберните ваши теги
- с тегами и создать перенос, который будет центрировать список на странице. Код будет выглядеть так:
- Элемент списка
- Элемент списка
Тег не будет ничего выравнивать сам по себе; Вы должны использовать CSS, чтобы центрировать все. Добавьте следующий код между тегами> или в своем CSS-файле, чтобы центрировать список: "div {display: block; text-align: center;} ul {display: inline-block; text-align: left;}".