Реферат: CSS Design: Укрощение списков

Item 3

Item 4

Item 5 сделаем этот пункт немного длиннее, чтобы он переходил на следующую строку

Выстраиваем список в ряд

Кто сказал, что списки должны идти вертикально и оформляться слева маркерами? К примеру вам нужен нумерованный список ссылок, но визуально вы хотите, чтобы этот список на странице выглядел как вертикальная панель навигации. Или скажем, вы хотите, чтобы ссылки располагались горизонтально вдоль верхнего края страницы.

Это касается не только списка ссылок. Вам может понадобиться привести список несколько раз внутри абзаца (например, список книг). Структурно - это список, но раньше если бы вы такое сделали, этот список разорвал бы ваш абзац. CSS опять приходит к вам на помощь!

Так как данный список не будет являться на странице чем-то отдельным, я не буду помещать его в базовый DIV, как предыдущие списки. На этот раз разметка будет выглядеть так: абзац, список, следующий абзац.

Уже слышу крики: "Болван! Мы думали ты научишь нас, как помещать списки внутри абзаца, а не между двумя абзацами."

И на это я отвечу: "Ну да, вы правы. К сожалению (X)HTML не разрешает помещать списки внутрь абзаца. Однако с помощью стилей вы можете сделать вот что".

Сначала, вот стилевые правила:

#inline-list {

border: 1px solid #000;

margin: 2em;

width: 80%;

padding: 5px;

font-family: Verdana, sans-serif;

}

#inline-list p {

display: inline;

}

#inline-list ul, #inline-list li {

display: inline;

margin: 0;

padding: 0;

color: #339;

font-weight: bold;

}

Весь код помещен в <div id="inline-list">. В нем находится абзац, потом стандартный список UL, и за ним - еще один абзац. Список UL был отредактирован таким образом, чтобы после каждого пункта была запятая, а за последним пунктом шла точка.

Результат выглядит так (список выделен синим цветом):

К-во Просмотров: 340
Бесплатно скачать Реферат: CSS Design: Укрощение списков