Autor Zpráva
radekt
Profil
Dobrý den,
mám responsivní menu, z něhož část je skrytá (řešeno dvěma seznamy) a zobrazí se po kliknutí na symbol "kebab menu". Ten se pak změní na křížek. Vše funguje, jen jeden formátovací problém: křížek mi vyskočí o něco doleva, než je pozice "kebab menu". Způsobuje to rotace textu, když ji vypnu, neděje se to. Pokoušel jsem se oba symboly srovnat pomocí float nebo text-align, ale neúspěšně. Nevíte někdo, jak na to?
Díky
Str4wberry
Profil
Tak problém je v tom, že oba znaky jsou na jiném místě v rámci řádku:

× …

Z toho plyne, že při otočení budou na jiném místě.

Je potřeba je ručně posunout, aby se zobrazovaly na stejném místě. Toho jde docílit relativním posicováním nebo třeba transformací translateY/translateX.

Mimochodem, to natočení ve většině prohlížečů nefunguje, protože transformaci nejde aplikovat na řádkové elementy (display: inline). Je potřeba nastavit block nebo inline-block.

Tady je ukázka, kde jsem se to pokusil srovnat: Živá ukázka

Mimochodem, dosáhnout přesného umístění textových symbolů napříč všemi prohlížeči je prakticky nemožné. A celá konstrukce bude závislá na velikosti a stylu písma. Pokud by to by problém, tak je potřeba použít obrázkové ikonky.
radekt
Profil
Str4wberry:
Díky moc a taky za ten tip s nastavením block nebo inline-block. Našel jsem mezitím ještě jeden způsob, jak to srovnat - transform-origin: 30% 65%;. Takže prozkouším obě varianty, proženu to různými prohlížeči, která je lepší.

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: