| Autor | Zpráva | ||
|---|---|---|---|
| radekt Profil |
#1 · Zasláno: 2. 2. 2016, 08:26:06
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 |
#2 · Zasláno: 2. 2. 2016, 08:56:41
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 |
#3 · Zasláno: 2. 2. 2016, 09:13:10
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ší.
|
||
|
Časová prodleva: 8 let
|
|||
0