Использовать 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;
}
В итоге должна получиться вот такая картина:
Особое внимание следует уделить следующим строкам:
#wrapper ul{
text-align: justify;
overflow: hidden;
}
#wrapper ul:after{
content: "";
width: 100%;
display: inline-block;
}
#wrapper ul li{
display: inline-block;
}
В них-то и заключается вся суть решения данной задачи.
Вот такой интересный способ и, при этом очень, простой в реализации. В большинстве случаев это одно из лучших решений для горизонтального меню.