ZorNet.Ru — сайт для вебмастера » HTML и CSS » Как сделать список li и ul в две колонки CSS

Как сделать список li и ul в две колонки CSS

Как сделать список li и ul в две колонки CSS
Если у вас на сайте прописаны элементы списка li и ul, где нужно вывести в 2 колонки, то все можно вывести через стиль CSS стилизацию. Рассмотрим все на примере одной функций, что можно встреть на ресурсах в материале, это Похожие материалы. На них как раз все создавал и все отлично получилось. Также не забываем, что когда изменение произойдет, то нужно корректно все вписать в основной дизайн, где отлично справятся свойства margin и padding, что к стилям прикрепить можно и потом по пикселям и процентам все вывести по центру или сделать одинаковые отступы.

Так как множество есть функций на этих элементах, то иногда зайдешь на интернет ресурс, то смотришь все в одну колону установлено, а по правую сторону много места остается, то как раз здесь можно больше материала разместить и место не будет пустовать, а на нем разместится информация.

Сделать HTML список UL LI в две колонки при помощи CSS


Берем за основу стандартный и безусловно самый актуальный список.

Код
<ul class="zornet_ru">
  <li>Сайт ZORNET.RU</li>
  <li>Скрипты сайта</li>
  <li>Шаблоны сайта</li>
  <li>Дизайн портала</li>
  <li>Скрипты и шаблоны</li>
  <li>Все для сайта uCoz</li>
</ul>

Как установили его, то здесь нужно добавить стиль, который выведет темы в колонки.

Код
.zornet_ru li {display:block;width:49%;float:left;}

Чтоб понятно было, все проверил на работоспособность.

По умолчанию идет:

Маркированный список ul в две колонки через CSS

При добавление стиля и правкой свойствами свойставя margin и padding все стало совершенно по другому.

Вывести список в 2 колонки li и ul на CSS

Так вы быстро можете решить задачу, что визуально по другому смотрится и как видим, в два раза больше несет информационный поток под читабельность.
09 Ноября 2017 Просмотров: 14237 Комментариев: (6)
Поделиться в социальных сетях

Материал разместил
Kosten
Похожие материалы

Оставь свой отзыв

Комментарии: 6
workman
workman 09 Ноября 2017 21:001
0
Есть совершенно другой вариант, что предоставлена демонстрация, где выставлено в две колонки.

Код
<style>
.zornet_ru{display:flex;}
</style>


Код
<div class="zornet_ru">
<ul>
   <li>Сайт ZORNET.RU</li>
   <li>Скрипты сайта</li>
   <li>Шаблоны сайта</li>
   <li>Дизайн портала</li>
   <li>Скрипты и шаблоны</li>
   <li>Все для сайта uCoz</li>
</ul>
<ul>
   <li>Сайт ZORNET.RU</li>
   <li>Скрипты сайта</li>
   <li>Шаблоны сайта</li>
   <li>Дизайн портала</li>
   <li>Скрипты и шаблоны</li>
   <li>Все для сайта uCoz</li>
</ul>
</div>


демо
Kosten
Kosten 09 Ноября 2017 21:272
0
Здесь сразу маркеры нужно было запретить, или с ними должно идти, а так еще один вариант. Просто на первом, на zornet.ru не проверял, а хотел поставить, но нужно было адаптировать под мобильный аппарат, так как только немного меньше монитор по размеру, то все в одну строку, но так и должно.

Но вот только фон на всю ширину оставался, и здесь медео нужно прописать, что можно было, но все же решил другой тип поставить, как на урааа сайте, что идет в 4 картинки, думаю в сети есть этот информер или код.
-SAM-
-SAM- 10 Ноября 2017 01:553
0
В материале здесь пример разобран на списке похожих материалов. Выложенное выше workman - не для похожих материалов (ведь в них всё в одном ul находиться). Вот еще материал о разбивке на две колонки конкретно списка похожих материалов.

workman
workman 13 Ноября 2017 15:044
0
Вот подвигай экраном до ширины 480px https://jsfiddle.net/Kocsten/pynkr8mt/2/
Kosten
Kosten 13 Ноября 2017 15:345
0
Адаптировал, что попробовать нужно, так как думаю не плохо должно смотреться.
Kosten
Kosten 13 Ноября 2017 17:546
0
Вот так сделал, но все таки, когда небольшой размер монитора не очень красиво смотрится.

Так по умолчанию.



Это уже на гаджетах.



Вот стили:

Код
.ul.uRelatedEntries {list-style: none;margin-top: 3px;margin-bottom: 0; margin-left: 0;padding: 0 0 0 0;}  
  .vvv li {list-style: none;margin: 3px;padding: 3px 0px 3px 32px;background: url('http://zornet.ru/Ajaxoskrip/Abaveg/Sites-Alternate-icon.png') no-repeat 5px 3px;margin-bottom: .1em;text-shadow: 0 1px 0 #FFFFFF;border: 1px solid #C8C8C8;border-radius: 3px;}  
  .vvv :link {text-decoration:none; color:#0F4780;font-weight:bold;font-size:8pt;}  
  .vvv :visited {text-decoration:none; color:#0F4780;font-weight:bold;font-size: 9pt;}  
  .vvv :active {text-decoration:none; color:#708090;font-weight:bold;}  
  .vvv :hover {text-decoration:none; color:#000000;font-weight:bold;}
  .vvv li {display:block;width:45%;float:left;}

@media only screen and (max-width: 1220px) {
  .vvv li, .ul.uRelatedEntries {
  width:94%;
  font-size: 13px;
  font-weight: bold;
  }
}
Войдите:
avatar