Dvousloupcový seznam

21. října 2005

•

Toto řešení ukazuje, jak vytvořit krátký dvousloupcový seznam pomocí CSS. Lze ho použít například k vyjmenování výhod a nevýhod určitého prvku na vašich stránkách. Jedná se o neobvyklé a přitom jednoduché řešení, vhodné především pro široké layouty.

Zde si můžete prohlédnout výsledek.

Toto řešení publikoval Nandini Doreswamy. Bližší popis najdete v článku Bulleted Lists: Multi-Layered Fudge.

CSS

#seznam
{
width: 800px;
}
ul.levy
{
float: left;
width: 400px;
margin: 0px;
padding: 15px 0px;
border: 0px none;
list-style-position: inside;
list-style-type: square;
position: relative;
left: 20px;
}
ul.pravy
{
float: right;
width: 400px;
margin: 0px;
padding: 15px 0px;
border: 0px none;
list-style-position: inside;
list-style-type: square;
}
.no-space
{
margin: 0px;
padding: 0px;
}

XHTML

<html>
<body>
<div id=“seznam“>
<p class=“no-space“>Lorem ipsum dolor…</p>
<ul class=“levy“>
<li>Položka 1: Levý</li>
<li>Položka 1: Levý</li>
</ul>
<ul class=“pravy“>
<li>Položka 1: Pravý</li>
<li>Položka 1: Pravý</li>
</ul>
<p class=“no-space“>Lorem ipsum dolor…</p>
</div>
</body>
</html>