Css: summary jako inline-block, details pod sebou

crs

(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š

(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

šikmo.cz – Digitální parťák, od designu přes vývoj až k marketingu.

https://webtrh.cz/diskuse/css-summary-jako-inline-block-details-pod-sebou/#reply1483733

skorozacatecnik

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

(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