![]()
чилка HTML
|
Каскадные таблицы стилей (CSS)
|
Стилевые параметры списка
Как разместить элементы списка горизонтально.Элементы списка по умолчанию выстраиваются вертикально друг под другом, но иногда требуется разместить их по горизонтали, например, для создания различных меню.В таком случае к селектору <LI> следует добавить стилевое свойство display со значением inline, оно преобразует блочный элемент в строчный.
Пример 1
<style> ul.meny {margin: 0; padding: 4px;} ul.meny li { display: inline; /* Отображать как строчный элемент */ margin-right: 5px; border: 1px solid #000000; padding: 5px; } </style> <ul class="meny"> <li>Ссылка 1</li> <li>Ссылка 2</li> <li>Ссылка 3</li> <li>Ссылка 4</li> <li>Ссылка 5</li> </ul> Результат
Как разместить элементы списка в колонки.Чтобы разместить элементы списка в несколько колонок, надо использовать тэг <columns>
Пример 2
Результат Сылки А:
Текст:
Как расположить текст на странице в несколько колонок? И можно ли это делать автоматически? Наверняка, многие из тех из вас, кто занимается или занимался раньше веб-разработкой, сталкивались с такой задачей — и часто упирались в сложные решения, требующие хитрых стилей, либо применения дополнительных библиотек на JavaScript.
Многоколоночная верстка контента (не путать с задачей общей многоколоночной верстки страницы, которая скорее ближе к проблеме расположения блоков по сетке) долго пробивала себе дорогу в мире веб-стандартов и, наконец-то, не просто достигла статуса Candidate Recommendation в виде соответствующего модуля CSS3 Multi-column Layout, но и получила достаточно широкую поддержку в браузерах: где-то с префиксами (-moz- или -webkit-) и где-то в актуальных (Opera 11.1+) и планируемых версиях (IE10+), причем сразу без префиксов. Ссылка на статью >>>
Как добавить к номеру списка круглую скобку.Для этого используем конструкцию li:before, которая добавляет перед каждым элементом списка некое содержание. В нашем случае - скобка " ) ".Свойство counter-increment необходимо для увеличения номера списка на единицу. Значение mama - это уникальный идентификатор счетчика, имя его задаем сами.
Пример 3
Результат
например, заключить число в квадратные скобки, в стилях при этом изменится только одна строка. content: '[' counter(mama) '] ';
|
|