C# týden November Black Friday
Black Friday je tu! Využij jedinečnou příležitost a získej až 80 % znalostí navíc zdarma! Více zde
Pouze tento týden sleva až 80 % na e-learning týkající se C#

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

Aktivity (1)
Avatar
Jan Hlavatý
Člen
Avatar
Jan Hlavatý:9. července 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. července 12:29
 
Odpovědět
9. července 12:28
Avatar
Petr Sedláček:9. července 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. července 13:17
Avatar
Jan Hlavatý
Člen
Avatar
Jan Hlavatý:9. července 13:45

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

 
Nahoru Odpovědět
9. července 13:45
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:9. července 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. července 15:10
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:9. července 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. července 15:15
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!
Avatar
Jakub Podskalský:9. července 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. července 18:41
Avatar
Peter Mlich
Člen
Avatar
Odpovídá na Jakub Podskalský
Peter Mlich:10. července 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. července 7:46
Avatar
Odpovídá na Jan Hlavatý
Petr Sedláček:10. července 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. července 11:10
Avatar
Peter Mlich
Člen
Avatar
Odpovídá na Petr Sedláček
Peter Mlich:10. července 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. července 12:16
Avatar
Jan Hlavatý
Člen
Avatar
Jan Hlavatý:10. července 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. července 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.