Основы работы с XHTML и CSS
Подавление вывода символов маркеров
Может понадобиться использование других, отличных от стандартных, символов маркеров перед элементами списка. В следующем примере свойство list-style-type задается как none, чтобы подавить вывод маркеров. Затем каждый элемент списка помечается символом правой стрелки (
<style type="text/css?> ul {list-style-type:none; margin-left:20px} </style>
<ul> <li><span style="font-family:webdings">4</span> Элемент списка 1</li> <li><span style="font-family:webdings">4</span> Элемент списка 2</li> <li><span style="font-family:webdings">4</span> Элемент списка 3</li> </ul>
Листинг 6.6. Код для вывода специального символа маркера (html, txt)
Рис. 6.1. Неупорядоченный список с маркерами в виде стрелки
В этом примере используемый по умолчанию символ маркера не заменяется правой стрелкой. Вместо этого подавляется вывод маркера и в начале каждого элемента списка добавляется символ стрелки. Хотя вывод маркера подавляется, пространство для скрытого символа все еще занимает место в строке. Поэтому требуется настройка margin-left, чтобы сместить элементы списка назад в их обычные позиции.
Рассмотрим следующий список, в котором символ правой стрелки добавляется перед элементами, но вывод используемых по умолчанию маркеров намеренно не подавляется.
<style type="text/css"> ul {margin-left:20px} </style>
<ul> <li><span style="font-family:webdings">4</span> Элемент списка 1</li> <li><span style="font-family:webdings">4</span> Элемент списка 2</li> <li><span style="font-family:webdings">4</span> Элемент списка 3</li> </ul>
Листинг 6.7. Код неупорядоченного списка без подавления символов маркеров (html, txt)
Рис. 6.2. Неупорядоченный список с видимыми маркерами и символами стрелки
Когда в таблицу стилей добавляется list-style-type:none, то используемые по умолчанию символы в форме диска не выводятся; однако занимаемое этими символами пространство остается.
Чтобы переместить список, включая стрелки, влево, так чтобы он занял это пространство и сохранил нормальный отступ элементов списка, в таблицу стилей добавляют свойство margin-left. Левое поле шириной примерно 20 пикселей выравнивает символы правой стрелки в позиции, которую ранее занимали маркеры.
