Formátujeme seznamy a výčty v CSS, příklad 2

Seznamy se automaticky zanořují, při čtyřech a více zanořeních se aplikuje třetí styl, tzn. prázdný kruh nebo malá latinská písmena. Výčty mají zvýrazněné pojmy kurzívou a v případě více za sebou jdoucích definic se odřádkuje 1,5× více než mezi normálními odstavci. Seznamy i výčty jsou navíc odsazeny od levého okraje, přičemž velikost odsazení se odvozuje od velikosti písma. Ve všech případech lze uvnitř položek používat odstavce (pro delší text), kdy dochází k automatickému oddělování jednotlivých položek a odstavců prázdnou řádkou, i samotný text (pro kratší položky), kdy k odřádkování nedochází.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis volutpat. Duis leo. Donec laoreet iaculis quam. Vivamus ipsum. Vestibulum feugiat, neque pretium aliquet pulvinar, nunc diam fringilla mi, sit amet pulvinar nibh enim vel ipsum. Nulla a nibh nec turpis ornare tempus. In commodo. Morbi eu velit.

Suspendisse potenti. Nunc vel arcu. Aliquam posuere lorem eget lectus. Quisque scelerisque ligula ac tellus. Donec pede risus, tristique vel, blandit et, volutpat vel, leo. Phasellus lacus. Etiam molestie. Aenean non pede. Cras condimentum semper purus. In porta.

  1. Phasellus sed tellus eu pede imperdiet volutpat. Fusce eu lacus eget dolor dictum mattis. Vivamus a ligula vitae sapien semper suscipit. Donec pellentesque dolor quis enim. Ut mauris. Praesent mi ipsum, venenatis vel, ullamcorper sit amet, scelerisque at, eros. Pellentesque eget massa at augue tincidunt feugiat. Sed quam.

    In mollis est a enim. Maecenas bibendum, felis a feugiat malesuada, massa elit imperdiet quam, vitae posuere augue libero eget wisi. Maecenas ornare. Cras quam lorem, interdum at, ullamcorper et, suscipit sed, sapien. Proin ut quam. Vestibulum eget risus in metus faucibus feugiat. Quisque interdum ligula in dui.

  2. Aliquam in elit ac orci scelerisque lobortis. Praesent ultrices. Maecenas mi. Vivamus ante. In luctus ante vel velit. Praesent tempus, odio vitae semper accumsan, neque quam posuere mi, eu feugiat tortor elit eget dolor. Fusce gravida leo quis pede. Integer molestie. Sed eu pede id nunc rutrum posuere. Phasellus orci. Praesent rutrum purus vitae urna.

    1. Duis diam odio, mattis sit amet, ultricies nec, imperdiet id, ligula. Aliquam erat volutpat. Etiam ultricies leo nec tortor. Mauris eros. Donec vel dui id dui blandit lacinia. Duis et sem. Ut eu leo. Aenean consequat, mi vitae auctor egestas, neque magna pellentesque mauris, at tempor sapien est ac felis. Vivamus est nunc, tempor ac, molestie in, mollis id, metus.

    2. Aenean purus felis, pulvinar fermentum, sollicitudin nec, gravida ut, velit. Donec urna. Duis tincidunt. Etiam hendrerit, tortor eu semper volutpat, odio elit pretium sem, at varius massa augue vitae erat. Aliquam sapien. Nullam vehicula, ante nec tempus dictum, odio lacus venenatis dolor, sed blandit lacus nisl a augue.

    3. Aenean purus felis, pulvinar fermentum, sollicitudin nec, gravida ut, velit. Donec urna. Duis tincidunt. Etiam hendrerit, tortor eu semper volutpat, odio elit pretium sem, at varius massa augue vitae erat. Aliquam sapien. Nullam vehicula, ante nec tempus dictum, odio lacus venenatis dolor, sed blandit lacus nisl a augue.

      1. Vestibulum at nulla eu libero blandit tincidunt. Nunc ac turpis. Vivamus est felis, convallis a, congue ut, laoreet vitae, massa. Aenean hendrerit. Aenean mi ante, mattis vel, molestie id, vestibulum eu, elit. Integer tincidunt euismod arcu.

        Proin sit amet ligula ut risus adipiscing viverra. Suspendisse erat libero, varius eu, nonummy in, molestie vel, velit. Nullam semper sapien volutpat erat.

      2. Suspendisse vitae sapien eleifend libero dictum pretium. Duis at lorem. Mauris dapibus. Phasellus congue volutpat eros. Vivamus mauris. Praesent laoreet.

    4. Donec vitae magna. Phasellus id wisi vitae est ultricies vestibulum. Ut vel lacus ac sapien pretium egestas. Proin a tortor in lacus tempor tincidunt. Nam scelerisque, sem eget convallis lacinia, erat nulla facilisis massa, nec consequat justo massa non turpis.

  3. In vehicula vestibulum sapien. Donec aliquam justo quis erat. Nunc fermentum. Donec vehicula lacus vel nulla. Aenean felis. Aliquam erat volutpat. Nam vitae velit. Sed vel dui et ipsum vehicula aliquet. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus nec tellus id felis interdum dapibus.

Suspendisse potenti. Nunc vel arcu. Aliquam posuere lorem eget lectus. Quisque scelerisque ligula ac tellus. Donec pede risus, tristique vel, blandit et, volutpat vel, leo. Phasellus lacus. Etiam molestie. Aenean non pede. Cras condimentum semper purus. In porta.

Lorem ipsum

Phasellus sed tellus eu pede imperdiet volutpat. Fusce eu lacus eget dolor dictum mattis. Vivamus a ligula vitae sapien semper suscipit. Donec pellentesque dolor quis enim. Ut mauris. Praesent mi ipsum, venenatis vel, ullamcorper sit amet, scelerisque at, eros. Pellentesque eget massa at augue tincidunt feugiat. Sed quam.

In mollis est a enim. Maecenas bibendum, felis a feugiat malesuada, massa elit imperdiet quam, vitae posuere augue libero eget wisi. Maecenas ornare. Cras quam lorem, interdum at, ullamcorper et, suscipit sed, sapien. Proin ut quam. Vestibulum eget risus in metus faucibus feugiat. Quisque interdum ligula in dui.

Lorem ipsum dignissim at

Nulla pharetra cursus magna. Ut porttitor ligula quis purus. Nam a ante sit amet dui condimentum volutpat. Mauris porta tempor lectus. Quisque odio. Quisque vestibulum. Praesent congue laoreet nisl. Nam ipsum mauris, placerat et, pharetra ut, pharetra ac, ligula. Duis convallis risus sit amet tortor.

Sed ut lectus non nisl pellentesque bibendum. Vivamus augue tellus, pulvinar vitae, pulvinar in, vestibulum nec, ante. Curabitur et neque. Pellentesque congue.

Aliquam malesuada fermentum

Cras quam lorem, interdum at, ullamcorper et, suscipit sed, sapien. Proin ut quam. Vestibulum eget risus in metus faucibus feugiat. Quisque interdum ligula in dui. Phasellus sed tellus eu pede imperdiet volutpat.

Ut mauris. Praesent mi ipsum, venenatis vel, ullamcorper sit amet, scelerisque at, eros. Pellentesque eget massa at augue tincidunt feugiat. Sed quam. Sed sed mauris sit amet tellus aliquam semper.

Sed ut lectus non nisl pellentesque bibendum. Vivamus augue tellus, pulvinar vitae, pulvinar in, vestibulum nec, ante. Curabitur et neque. Pellentesque congue. Aliquam malesuada fermentum enim.

Suspendisse potenti. Vivamus justo tellus, dignissim sit amet, nonummy at, luctus at, sapien. Proin sit amet ligula ut risus adipiscing viverra. Suspendisse erat libero, varius eu, nonummy in, molestie vel, velit. Nullam semper sapien volutpat erat. Donec eget velit vitae sapien vehicula mattis. Quisque sagittis.