Zadejte hledaný výraz...

Css: summary jako inline-block, details pod sebou

crs
verified
rating uzivatele
(1 hodnocení)
7. 5. 2021 16:36:20
Zdravím,
V HTML kódu mám několik rozklikávacích
, jejichž mají defaultně display:block, což znamená, že dají rozliknout z celé šířky stránky, ať už je jakkoli dlouhé/široké.
Jak docílit, aby se
mohl rozkliknout pouze po délce (tj. kliknutím na jejich 'nadpis') a současně zůstaly
pod sebou?
(očekávaně) způsobí, že
budou za sebou, já je potřebuji pod sebou. Zkoušel jsem:
, to samé pro , všechny kombinace mezi tím, a nic nezafungovalo.
Díky za rady.
7. 5. 2021 16:36:20
https://webtrh.cz/diskuse/css-summary-jako-inline-block-details-pod-sebou/#reply1483734
Pavel Mareš
verified
rating uzivatele
(19 hodnocení)
7. 5. 2021 17:35:25
Já možná nepochopil cíl nebo zadání ... ale když dám display: inline-block na summary tak jde kliknout jen na nadpis a furt je vše pod sebou. Není tohle o chceš?
ukázka: https://jsfiddle.net/pamare/6v5d2agp/
7. 5. 2021 17:35:25
https://webtrh.cz/diskuse/css-summary-jako-inline-block-details-pod-sebou/#reply1483733
skorozacatecnik
verified
rating uzivatele
7. 5. 2021 17:41:03
Napsal crs;1622449
Zdravím,
V HTML kódu mám několik rozklikávacích
, jejichž mají defaultně display:block, což znamená, že dají rozliknout z celé šířky stránky, ať už je jakkoli dlouhé/široké.
Jak docílit, aby se
mohl rozkliknout pouze po délce (tj. kliknutím na jejich 'nadpis') a současně zůstaly
pod sebou?
Moc moudrej z toho popisu nejsem, chtělo by to vidět.
Nepomůže display:flex a flex-direction? (střelba hodně od boku :)
7. 5. 2021 17:41:03
https://webtrh.cz/diskuse/css-summary-jako-inline-block-details-pod-sebou/#reply1483732
crs
verified
rating uzivatele
(1 hodnocení)
7. 5. 2021 19:12:31
Díky za odpovědi.
@Doctore97: Z nějakého důvodu mi to začalo fungovat :), ale současně se ztratily šipečky/trojúhelníčky ukazující doprava nebo dolů podle toho, jestli je obsah rozkliknutý nebo ne.
HTML má defaultně pro details a summary nastaveno vlastnosti:
Změnou display: list-item na inline nebo inline-block se „ztratí vliv“ list-style (a možná ještě nějakých vlastností, co se seznamy souvisí).
Toto se dá ale spravit pomocí ::before a content - napíšu sem své řešení pro někoho, kdo by to třeba v budoucnu řešil —
Já ještě navíc mám uvnitř summary nadpisy (které samy o sobě před šipkami odsazují), ale stačí danému nadpisu přiřadit display: inline-block.
7. 5. 2021 19:12:31
https://webtrh.cz/diskuse/css-summary-jako-inline-block-details-pod-sebou/#reply1483731
Pro odpověď se přihlašte.
Přihlásit