Собственно запись о том как сделать элементы списка горизонтально и по центру. Пригодится для создания меню сайта на основе списка.
<ul id="sort">
<li><a href="#">По дате</a></li>
<li><a href="#">По рейтингу</a></li>
<li><a href="#">По популярности</a></li>
</ul>Имеет вид:
Для того чтобы выстроить элементы по горизонтали применяем для элемента списка свойство display со значением inline или inline-block.
Если inline, то элементы располагаются на той же строке, последовательно. Ширина и высота элемента определяются по содержимому и поменять их нельзя. При переносе на другую строку, если масштабировать, переносится как текст. А вот если inline-block, то элементы ведут себя как блоки, можно менять их размер свойствами width/height и при масштабировании переносятся целиком.
<style>
ul#sort li{
display:inline-block; /* расположить пункты горизонтально */
}
</style>а вот если inline-block, то элементы ведут себя как блоки и можно менять их размер свойствами width/height.
теперь выравниваем по центру
<style>
ul#sort li{
display:inline-block; /* расположить пункты горизонтально */
}
#sort {
text-align: center; /* пункты и текст горизонтально по центру */
}
</style>
Допишем размер и подкрасим:
<style>
#sort {
text-align: center; /* пункты и текст горизонтально по центру */
}
#sort li{
display:inline-block; /* расположить пункты горизонтально */
line-height: 100px;/*интерлиньяж (межстрочный интервал) совместно с height работает как вертикальное выравнивание*/
height: 100px;
width: 150px;
background-color: green;
}
#sort a{
color:white;
}
</style>
