Úprava odsazení seznamu vedle floatu

December 9, 2009

Při formátování obsahu webu se mi přihodila situace, kterou jsem vyřešil celkem nestandardním řešením. O to řešení se s vámi nyní podělím.

Při přípravě wordpressového tématu pro můj nejnovější web, jsem potřeboval vyřešit, jak upravit odsazení netříděného seznamu <ul>, aby bylo vždy stejné, ať se nachází napravo od obrázku s pozicováním přes float nebo by se nacházel začátek onoho seznamu na normálním levém kraji stránky. Seznam se při nafloatování choval špatně, proto jsem jej floatovat nemohl.

Při nastavení margin-left nebo padding-left se sice odsadil seznam zleva, ale odsadil se “pod plovoucím objektem”. Takže sice byl odsazen od kraje stránky, nikoli ale od objektu.

Řešení tedy spočívá v relativním pozicování objektů <ul> a <li>.

Html kód tedy vypadá takto:

<div class="post">

 <p>
   <img class="alignleft" src="url-obrazku.jpg" />
   Nějaký úvodní text před seznamem.
 </p>

 <ul>
   <li>První prvek seznamu</li>
   <li>Druhý prvek seznamu</li>
   <li>Třetí prvek seznamu</li>
   <li>Čtvrtý prvek seznamu</li>
 </ul>

</div>

A CSS k tomu:

.alignleft { float:left; }
.post ul { position:relative }
.post li { position:relative; left:30px; }

Tímto způsobem je možné napozicovat odsazení seznamu (v tomto případě o 30 px) zleva. Seznam bude tak pozicován stejně jak vedle nafloatovaného prvku, tak vedle levého kraje dokumentu. Na výsledek se můžete podívat třeba právě na nových stránkách Sebamedu.


6 Odpovědí na “Úprava odsazení seznamu vedle floatu”

  1. Řešil jsem něco podobného a používám toto:
    ul {overflow: hidden; zoom:1;}
    Seznam se mi pak odsazuje korektně i vedle floatujícího prvku.

  2. Ja bych pro jistotu jeste pripsal k “.post li” vlastnost “padding-right: 30px” aby pripadne dlouhy seznam nepretekal doprava mimo blok.

  3. OMG, proč lidi místo normálního rozumného kódování vymýšlejí takovéto příšerné hnusy? Brrr!

  4. to jako fakt? -> Promin, asi jsem prehledl tvuj prispevek k tematu. Pokud mas reseni, klidne ho sem pripis, jinak se tady nemusis projevovat.

  5. @Gianluca – klidně můžu napsat, že fotbalisti hráli špatně a vůbec k tomu není nutné, abych uměl kopat líp než oni. A nebo můžu umět, ale nemusím to ukazovat. Třeba.

  6. to jako fakt?

    a klidně můžeš být i kokot, ale klidně být i nemusíš, ale ta k jak si to napsal – tak A je správně. Bůh s tebou………

Legi Intellexi Condemnavi