UL LI список в две колонки — HTML and CSS

Css список в 2 колонки

Доброго времени суток всем читателям моего блога! Уже довольно давно не писал в блог, сегодняшний пост тоже не будет особо большим, но зато будет информативным.

Сегодня, в связи с тем, что копирайтер неправильно понял мой заказ и сделал тексты с длинными списками, на один из моих сайтов, а я когда одобрял гм… не особо вглядывался в написанное.

В общем, появилась нужда гармонично вписать эти списки в дизайн сайта, что бы не особо бросались в глаза своей неряшливостью. Для этого было решено вывести стандартный HTML список (теги UL и LI) в две колонки, что бы они более компактно размещались на странице и не портили вид длинной простыней.

Короче перейдем к делу и не будем тянуть котов или кого то еще за жизненно важные органы…

Как вывести HTML список UL LI в две колонки с помощью CSS

Все более чем просто, так как мне не хотелось возится с таблицами и тому подобной хренью, которая отнимает время при заполнении сайта.

Вот стандартный вид списка у вас на сайте, просто присваиваем ему класс — twocolumn.

После чего, вам нужно прописать стиль, показанный ниже. Для этого списка в свой шаблон, либо в CSS файл вашей темы, либо правим шаблон и вставляем код до закрытия тега HEAD.

Читайте также:  Сплоги на wordpress: полный FAQ

Как я уже говорил ни чего сложного и все довольно быстро. После того как вы сделаете все по инструкции, у вас в итоге будет такой результат:

  • Пункт списка
  • Пункт списка
  • Пункт списка
  • Пункт списка
  • Пункт списка
  • Пункт списка

 

Вот и все, надеюсь данная статья оказалась для вас полезна и помогла решить проблему которая возникла со списками. Короче, мира, добра, любви, бобла, трафа и подписывайтесь на обновления блога!

Теги: html ul три колонки, ul li в два столбца в две колонки
1 Star2 Stars3 Stars4 Stars5 Stars (6 голосов: 4,83 из 5)
Загрузка...

Подпишитесь и получайте новые статьи мгновенно на электронную почту

Похожие записи

  • Как убрать подчеркивание ссылки HTML and CSSКак убрать подчеркивание ссылки HTML and CSS [sc:AdSense] Доброго времени суток всем читателям моего блога! Сегодня хотелось бы написать заметку, о том как убрать подчеркивание ссылок на наших сайтах. Перед тем как перейти к делу, хотелось бы сначала заметить, что […]
  • Как сделать мигающий текст HTML and CSSКак сделать мигающий текст HTML and CSS [sc:AdSense] Доброго времени суток, я как обычно рад вас приветствовать на страницах своего блога! Сегодня бы хотелось рассмотреть создание мигающего текста на странице сайта с помощью Html и CSS. [note]Мигающий текст […]
  • Как сделать картинку ссылкойКак сделать картинку ссылкой [sc:AdSense] Доброго времени суток я как обычно рад вас приветствовать на страницах своего сео блога. Хотелось бы сегодня уделить внимание довольно незначительному моменту, но как показал яндекс вордстат интересующего людей. […]

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Подтвердите, что Вы не бот — выберите человечка с поднятой рукой: