[HTML][CSS] Zła interpretacja listy ze znacznikami HTML Opcje

[Kshyhoo]

Może ktoś mądrzejszy wytłumaczyć mi, dlaczego wykrzacza się numeracja listy?
http://jsfiddle.net/P5dnr/
Jak widać, numerowanie z licznikiem dodaje nową linię.

[RiE]

Za mądrzejszego się nie uważam, ale postaram się wytłumaczyć (IMG:style_emoticons/default/smile.gif)

To nie licznik dodaje nową linię, tylko znacznik p.
Jeżeli usuniesz licznik, ale nie usuniesz :before to dalej tekst przeskoczy do nowej lini.
Przykład: http://jsfiddle.net/P5dnr/10/


:before tworzy pseudo element, który jest pierwszym dzieckiem.
Zatem Twój kod jest równoważny z tym:

[HTML] pobierz, plaintext 
<li><span>Pierwsze dziecko elementu li</span><p>w znacznikach &lt;p&gt;</p></li> // dwie linie
<li><span>Pierwsze dziecko elementu li</span>bez znaczników &lt;p&gt;</li> // jedna linia
[HTML] pobierz, plaintext 

Znacznik p domyślnie wyświetla się jako blok(display:block), dlatego przeskakuje do nowej lini.
Rozwiązaniem byłoby nadanie display:inline, albo zmiana znacznika p na jakiś 'inline'.

[Kshyhoo]

No to się już dowiedziałem i kombinowałem a display: inline, ale do tej pory bez rezultatu. Muszę przerobić na coś w stylu klasa.ol klasa li
Znalazłem dwa przykłady, które działają zgodnie z moim zamysłem, czyli po DIV class="tutek" następuje automatyczne numerowanie list bez nadawania odrębnych klas
http://fiddle.jshell.net/Gbf6u/
http://jsfiddle.net/audetwebdesign/wsmnJ/

[vonski]

A jak zrobisz tak:

[HTML] pobierz, plaintext 
.tutek2 > ol > li:first-child p {
    display:inline-block;
}
[HTML] pobierz, plaintext 

to też nie pomaga?

[Kshyhoo]

No właśnie znacznik P jest elementem blokowym.

[vonski]

No tak, a display:inline-block robi z elementu blokowego, element "blokowo-liniowy" (IMG:style_emoticons/default/smile.gif) Czyli można mu nadać szerokośc i wysokość, marginesy tak jak blokowemu, ale w przeciwieństwie do blokowego nie "przeskakuje" do nowej linii.

[Kshyhoo]

Kurde, działa (IMG:style_emoticons/default/wink.gif)
http://jsfiddle.net/P5dnr/12/

Kurcze, działa na przykładzie ale na stronie bez zmian ;(

[RiE]

Kurcze, działa na przykładzie ale na stronie bez zmian ;(

[HTML] pobierz, plaintext 
    .tutek2 > ol > li:first-child p {
    display:inline-block;
    }
[HTML] pobierz, plaintext 

Powyższa reguła odnosi się tylko do pierwszego elementu li, w przypadku kiedy n-ty znacznik li ma w sobie p, nie zadziała.

[HTML] pobierz, plaintext 
    .tutek2 > ol > li > p {
    display:inline-block;
    }
[HTML] pobierz, plaintext 

Dla wszystkich elementów li, których potomek to p

[Kshyhoo]

Ale to wykrzacza resztę:
http://jsfiddle.net/P5dnr/14/

[vonski]

http://jsfiddle.net/P5dnr/15/

Chodzi Ci o taki efekt?

[mar1aczi]

Bądź ustawiając szerokość: http://jsfiddle.net/P5dnr/16/

[Kshyhoo]

Tylko, że to nie działa dobrze, przesuwa numerek z dół.
http://jsfiddle.net/P5dnr/17/

Chyba zmogłem problem:
http://jsfiddle.net/P5dnr/18/

[vonski]

http://jsfiddle.net/P5dnr/19/

dla .tutek1 > ol > li:before {vertical-align:top;} i dla elementów w środku <li> {margin-top:0} - przez to Ci się trochę zmniejszą odstępy (o 10px chyba?) więc możesz o 10px powiększyć np. margin-bottom tych elementów. Tak bym jakoś kombinowal (IMG:style_emoticons/default/smile.gif)

EDIT:
Ok, widzę że już dałeś rade (IMG:style_emoticons/default/smile.gif) Git

Ten post edytował vonski 3.02.2014, 23:13:31

[Kshyhoo]

No właśnie nie wszystko działa jak należy. Tym sposobem przestało mi numerować listy zagłębione, w tym również w znacznikach PRE.
http://jsfiddle.net/P5dnr/22/

Powód edycji: [Kshyhoo]:

[mar1aczi]

Wstawianie licznika masz zdefiniowane tylko i wyłącznie dla:

[CSS] pobierz, plaintext 
.tutek1 > ol > li:before,
.tutek2 > ol > li:before
[CSS] pobierz, plaintext 

w przedstawionym przykładzie.

Ten post edytował mar1aczi 4.02.2014, 15:41:27

[Kshyhoo]

No jasne, w zimowy sen zapadłem. Chyba czas na wakacje (IMG:style_emoticons/default/smile.gif)

Kuleje mi nadal numerowanie listy w znaczniku PRE: http://jsfiddle.net/P5dnr/26/. Numerowanie powinno być wyrównane do prawej a jest do lewej.