falbar Растянутый на всю ширину HTML список

Растянутый на всю ширину HTML список

20 июля 2014 3442 0

Использовать HTML список можно по разному, но, несомненно, чаще всего его применяют при создании меню для сайта. Дизайнерская мысль в этом направлении бьет ключом, а верстальщику приходится приспосабливаться, орудуя не столь многочисленным набором инструментов. С проблемой красивого вписания меню в уже заданные габариты, я и столкнулся совсем недавно.

Реклама

Суть задачи была в том, чтобы создать горизонтальное меню, в котором первый и последние элементы будут прижаты к краям, а все внутренние - равномерно распределены на всю ширину блока.

Решение было найдено следующее.

Используем стандартную структуру списка:

<div id="wrapper">
  <ul>
      <li></li>
       <li></li>
       <li></li>
       <li></li>
   </ul>
</div>

Такое горизонтальное меню будет вот с таким CSS:

#wrapper{
  margin: 0 auto;
 background: #95C5A8;
    padding: 15px;
}
 #wrapper ul{
        text-align: justify;
        height: 160px;
      margin: 0;
      padding: 5px;
       outline: 2px solid blue;
        overflow: hidden;
   }
   #wrapper ul:after{
      content: "";
      width: 100%;
        display: inline-block;
  }
       #wrapper ul li{
         width: 120px;
           height: 160px;
          background: url(akb.png) no-repeat 50% 50%;
         outline: 2px solid red;
         display: inline-block;
      }

В итоге должна получиться вот такая картина:

li-ravnomerno-raspredeleny-na-vsyu-shirinu

Особое внимание следует уделить следующим строкам:

#wrapper ul{
    text-align: justify;
    overflow: hidden;
}
#wrapper ul:after{
    content: "";
  width: 100%;
    display: inline-block;
}
 #wrapper ul li{
     display: inline-block;
  }

В них-то и заключается вся суть решения данной задачи.

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

Реклама
Комментариев еще не оставлено
no_avatar