NOVINKA: Získej 40 hodin praktických dovedností s AI – ZDARMA ke každému akreditovanému kurzu!
S účinností od 26. 3. jsme aktualizovali Zásady zpracování osobních údajů – doplnili jsme informace o monitorování telefonických hovorů se zájemci o studium. Ostatní části zůstávají beze změn.

Diskuze: Jak donutit <li> ke stejnému odsazování jako <p>?

V předchozím kvízu, Online test znalostí HTML a CSS, jsme si ověřili nabyté zkušenosti z kurzu.

Aktivity
Avatar
Jan Hlavatý
Člen
Avatar
Jan Hlavatý:9.7.2019 12:28

Když píšu klasické odstavce, tak ty jsou po <p> mezi sebou odsazené mezerami.
Když udělám seznam <li>, tak jednotlivé položky mezi sebou mezerou odsazené nejsou.
Jak donutit <li>, aby dělal mezi položkami seznamu stejné mezery, jako je dělá <p>, ale přitom aby nedělal automaticky mezery mezi všemi řádky (což <p> taky nedělá)?

Zkusil jsem: line-height: to použít nejde, protože dělá automaticky mezery mezi všemi řádky

Editováno 9.7.2019 12:29
 
Odpovědět
9.7.2019 12:28
Avatar
Petr Sedláček
Tvůrce
Avatar
Petr Sedláček:9.7.2019 13:17

Asi bych se podíval, jaké deklarace používá <p> v základu a prostě je tam opsal :)

Konrétně je to:
p {
display: block;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 0;
margin-right: 0;
}

Samozřejmě se to může lišit u netradičních prohlížečů.

 
Nahoru Odpovědět
9.7.2019 13:17
Avatar
Jan Hlavatý
Člen
Avatar
Jan Hlavatý:9.7.2019 13:45

<p> v základu žádné deklarace nastavené nemá, není tedy co opsat

 
Nahoru Odpovědět
9.7.2019 13:45
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:9.7.2019 15:10

margin, padding, line-height, height, ...

On to jen neumi vysvetlit. Kazdy myslite neco jineho. P nema zadne styly v css. Ale ma jakesi vlastni prednastavene (asi jako kazdy tag) vuci neutralnim prvkum typu DIV nebo SPAN.
Cely problem kolem prednastavenych vlastnosti je slozitejsi. Kazdy prohlizec ma nejake spesl vlastnosti, ktere v jinem nefunguji nebo delaji neco jineho.

Kazdopadne zrovna u LI by mel pomoci margin. Idealne uplne na zacatku nejdriv vsechno vynulovat.
https://www.jakpsatweb.cz/css/margin.html

.navigace ul, .navigace li {display:block; margin:0; padding:0;}
 
Nahoru Odpovědět
9.7.2019 15:10
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:9.7.2019 15:15

Jeste jinak...
Pokud chces s necim poradit, je dobre sem dat zdrojovy kod, ktery staci pres ctrl+c / ctrl+v zkopirovat do stranka.html a spustit.
Z tveho zadani neni jasne, co presne potrebujes a co mas hotove.
Mozna se pokousis docilit neco takoveho:

* aaa

* bbb<br>
. ccc - cili, aby v odrazce byl text a mezi bbb a ccc nebyla
. mezera jako mezi LI (ve vizualnich editorech je to obbvykle ctrl(nebo shift)+enter)

* ddd
 
Nahoru Odpovědět
9.7.2019 15:15
Avatar
Jakub Podskalský
Člen
Avatar
Jakub Podskalský:9.7.2019 18:41

Taky jsem moc nepochopil tvůj záměr a ty ses ještě nevyjádřil. Chápu to tak, že chceš udělat vertikální margin mezi položkami v seznamu. Jestli ano, tak stačí udělat odstavec <p> jednoduše jako položku. Odsazení poté můžeš následně ještě editovat pomocí stylu toho odstavce.

 
Nahoru Odpovědět
9.7.2019 18:41
Avatar
Peter Mlich
Člen
Avatar
Odpovídá na Jakub Podskalský
Peter Mlich:10.7.2019 7:46

Ted mne napada, ze mozna odstavec pro navigaci by byla zajimava volba. Ale, vzhledem k tomu, ze obvykle pouziva clovek i mezery pred tagy a nema navigaci prilis velkou, tak je to asi jedno. Ale ty mezery by mohl umet odstranit server pred kesovanim. A pak to zipuje jeste.

<ul>
<li><a></a></li> ... 6 znaku pro nazvy tagu
<li><a></a></li> ... 6 znaku pro nazvy tagu
<li><a></a></li> ... 6 znaku pro nazvy tagu .. 18
</ul> + 4

<nav>
<p><a></a></p> ... 4 znaku pro nazvy tagu
<p><a></a></p> ... 4 znaku pro nazvy tagu
<p><a></a></p> ... 4 znaku pro nazvy tagu ... 12
</nav> + 6
 
Nahoru Odpovědět
10.7.2019 7:46
Avatar
Petr Sedláček
Tvůrce
Avatar
Odpovídá na Jan Hlavatý
Petr Sedláček:10.7.2019 11:10

Má. Když se podíváš ve vývojářských nástrojích do CSS deklarací, tak tam jsou uvedeny v kolonce "user agent stylesheet". Tedy jsou tam uvedeny trochu jinak, ale jsou to v podstatě ty základní vlastnosti, se kterými většina prohlížečů prvek <p> zobrazuje.

Viz zde, pod nadpisem Default CSS Settings:
https://www.w3schools.com/tags/tag_p.asp

 
Nahoru Odpovědět
10.7.2019 11:10
Avatar
Peter Mlich
Člen
Avatar
Odpovídá na Petr Sedláček
Peter Mlich:10.7.2019 12:16

Aha. Mam to, i ve Firefoxu neco je. Pekne, ale je jich tam asi 100, v tom neco najit :)

 
Nahoru Odpovědět
10.7.2019 12:16
Avatar
Jan Hlavatý
Člen
Avatar
Jan Hlavatý:10.7.2019 13:06

Už jsem na to mezi tím přišel, pomohlo nastavit li {margin-bottom: 0.5em;}
Co jsem chtěl docílit je vidět na www.proelektroprojektanty.cz/GTZ2.html, třeba hned v opovědích na tu první otázku. Bez toho margin-bottom jsou jednotlivé odrážky slité dohromady, s margin-bottom jsou mezi nimi opticky mezery.

Akceptované řešení
+5 Zkušeností
Řešení problému
 
Nahoru Odpovědět
10.7.2019 13:06
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 10 zpráv z 10.