Сегодня небольшой урок по верстке 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 и т.д. колонки.
