CSS — разбиваем список li на две равных колонки

CSS - разбиваем список li на две равных колонки Верстка

Сегодня небольшой урок по верстке ul/li в несколько колонок на чистом css.

Задача: Разбить список <ul> <li> на две колонки, используя чистый CSS

<ul>
<li>Пункт 1</li>
<li>Пункт 2</li>
<li>Пункт 3</li>
<li>Пункт 4</li>
<li>Пункт 5</li>
<li>Пункт 6</li>
<li>Пункт 7</li>
<li>Пункт 8</li>
</ul>

Решение:

Добавляем к ul класс col2

и далее в css прописываем следующие стили

.col2 li{display:block;float:left;width:49%;}
.col2{margin:0;padding:0;list-style-type:none;}

Если вы прописываете стили не посредственно в html, то у вас будет такая картина:

<html>
<head>
<style>
.col2 li{display:block;float:left;width:49%;}
.col2{margin:0;padding:0;list-style-type:none;}
</style>
</head>
<body>
<ul class="col2">
<li>Пункт 1</li>
<li>Пункт 2</li>
<li>Пункт 3</li>
<li>Пункт 4</li>
<li>Пункт 5</li>
<li>Пункт 6</li>
<li>Пункт 7</li>
<li>Пункт 8</li>
</ul>
</body>
</html>

Вот так легко и просто разбить html списки на 2 колонки, по сути таким же образом можно поделить и на 3,4,5 и т.д. колонки.

Поделиться с друзьями
Алексей

Веб-дизайнер и SEO оптимизатор. Занимаюсь созданием сайтов с 2010 года и их продвижение с 2012 года!

Оцените автора
( 5 оценок, среднее 2.8 из 5 )
Web-Revenue.ru
Добавить комментарий