Хоризонтални HTML списъци със CSS
В тази статия ще покажем как се създават хоризонтални HTML списъци, както и няколко популярни приложения на този похват. Обикновено сме свикнали да мислим за списъците <ul> и <ol> като за списък на отделни редове с означител на всеки ред. С няколко CSS трика може да подредим елементите в хоризонтален ред.
Създаване на хоризонтален HTML списък
За да се създаде хоризонтален <ul> или <ol> трябва да се промени изчертаването на на самия списък, а на всеки елемент <li> от него. Добавяме display: inline за хоризонтално подреждане, list-style-type: none за премахване на означителите и padding за да не се слепват елементите. Това са основните похвати за създаването на такъв списък. Ето няколко примера.
Хоризонтално меню на страницата
Добавяйки border към всеки <li> елемент получваваме приятно изглеждащи бутони:
<style type="text/css">
ul.horizontal_menu li {
display: inline;
list-style-type: none;
border: 1px solid #000;
margin: 5px;
padding: 2px;
}
</style>
<ul class="horizontal_menu">
<li>Home</li>
<li>About us</li>
<li>History</li>
<li>Contacts</li>
</ul>
Облак от тагове (tag cloud)
Ограничаваме <ul> до кутийка с фиксиран размер и показваме връзки с различен размер във всеки елемент на списъка, за да се получи облак от тагове:
<style type="text/css">
ul.tag_cloud {
border: 1px solid #000;
width: 200px;
height: 200px;
padding-left: 5px;
}
ul.tag_cloud li {
display: inline;
list-style-type: none;
margin: 5px;
}
</style>
<ul class="tag_cloud">
<li><a href="#" title="" style="font-size: 5px">small tag</a></li>
<li><a href="#" title="" style="font-size: 8px">very very very long tag</a></li>
<li><a href="#" title="" style="font-size: 16px">big tag</a></li>
<li><a href="#" title="" style="font-size: 10px">other kind of tag</a></li>
<li><a href="#" title="" style="font-size: 12px">tag next</a></li>
<li><a href="#" title="" style="font-size: 30px">another tag</a></li>
<li><a href="#" title="" style="font-size: 2px">new tag</a></li>
<li><a href="#" title="" style="font-size: 8px">tag last</a></li>
</ul>
Списък от връзки в дъното на страницата
Добавяме разграничителен символ на всеки елемент от списъка и връзките в дъното са оформени:
<style type="text/css">
ul.footer li {
display: inline;
list-style-type: none;
margin: 2px;
}
ul.footer li a {
font-style: italic;
}
</style>
<ul class="footer">
<li><a href="#" title="">footer link 1</a></li>
<li>|</li>
<li><a href="#" title="">footer long link 2</a></li>
<li>|</li>
<li><a href="#" title="">footer link 3</a></li>
<li>|</li>
<li><a href="#" title="">footer long link 4</a></li>
</ul>
Вижте всички примери тук.
Няма коментари
Обратно към списъка със статиите
Тази страница последно е променяна на 2024-04-17 08:31:38