Dlaczego ten HTML + CSS:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<style type="text/css">
p { margin : 4em; }
ul { margin-left: +2em;
margin-right: +2em;
}
li { margin-left: +2em;
margin-right: +2em;
}
</style>
<title>test
</title>
<body>
<p>
para - first line
<ul>
list heading
<li> item 1
</li>
<li> item 2
</li>
list trailer
</ul>
para - last line
</p>
</body>
</html>
Zasadniczo wygląda to tak:
para - pierwsza linia nagłówek listy & bu; przedmiot 1 & bu; punkt 2 lista zwiastunów para - ostatnia linia
(gdzie & bu; to moje imię dla znaku punktowego elementu listy).
Zwróć uwagę na ogromną przestrzeń między pierwszym wierszem akapitu oraz linię „nagłówek listy”. Jak się tego pozbyć?
Jedyny odpowiedni atrybut CSS wydaje się być „wysokość linii”, ale to wydaje się nie mieć żadnego efektu.
Ponadto, dlaczego ostatni wiersz akapitu jest wcięty bardziej w lewo niż pierwsza linia?
Wygląda na to, że jest to błąd w renderowaniu CSS firefox 32. Czy powinienem to zgłosić jako jeden?
Odpowiedzi:
1 dla odpowiedzi № 1Zrobiłem jsfiddle z kodem w nim; Umieściłem obramowania wokół elementów, dzięki czemu można zobaczyć, gdzie każdy element jest umieszczony.
The p element ma dookoła 4 marginesy, więc odsuwa go od lewego marginesu i odpycha od góry i następujących elementów o 4em.
Pierwszy p element jest również niepoprawnie zagnieżdżony (nie możesz mieć ul wewnątrz a p), więc przeglądarka zakłada, że powinna zostać zamknięta przed ul zaczyna się.
Pierwszy wiersz listy, „nagłówek listy”, nie jest poprawnie umieszczony, ponieważ tekst nie jest dozwolony bezpośrednio wewnątrz <ul> element - musi być albo wewnątrz <li> (element listy) lub poza <ul> element.
Ostatnia linia („para - ostatnia linia”) znajduje się bezpośrednio wewnątrz elementu body, a więc nie ma marginesów 4em, które są stosowane do drugiego p element.
Jeśli chcesz pozbyć się ogromnej luki, zmień css na p element, aby usunąć margines 4em - to takie proste!
p { margin : 1em; }
Radziłbym, żebyś przeczytał trochę na polu cssmodel, dzięki czemu można zrozumieć wypełnienie, marginesy i sposób wypełniania przestrzeni przez elementy. Radzę również uruchomić cały kod (HTML i CSS) za pomocą walidatora, aby złapać proste błędy, takie jak zniekształcone <p> element, tekst „nagłówek listy”, który jest niepoprawnie umieszczony w a <ul> element i niepotrzebne + znaki w css.
Przepisałem kod HTML i CSS, aby uzyskać bardziej rozsądny wybór marginesów i obramowań: patrz ten jsfiddle po szczegóły. Podstawy to:
- Upewnij się, że kod HTML jest poprawny.
- Nie używaj dużych wartości dla marginesów.
emjest szerokościąmznak w używanej czcionce. 4em to dość duża przestrzeń.
0 dla odpowiedzi nr 2
Dziękuję za powyższe odpowiedzi, ale nie dotarli do sedna problemu, IMHO: Specyfikacja HTML 5 ( http://www.w3.org/html/wg/drafts/html/master/grouping-content.html#the-ul-element ) mówi:
4.4.6 Element ul Kategorie: Przepływ treści. Jeśli dzieci elementu zawierają co najmniej jeden element li: namacalna zawartość. Konteksty, w których można użyć tego elementu: Tam, gdzie spodziewana jest zawartość przepływu.
Zawartość przepływu jest oczekiwana w znaczniku akapitu <p>, więc to interpretuję co oznacza, że mogę swobodnie wstawiać dowolny element treści przepływu w akapicie.
Ponadto, ponieważ nie skończyłem akapitu, chciałbymnie spodziewam się „margin-bottom” do zastosowania, tworząc ogromną przestrzeń między pierwszym wierszem akapitu a pierwszą nazwą listy.
Teraz bez właściwości „lewy margines” i „prawy margines” określonych dla „p”:
<style type="text/css"> p { margin-left : 2em; margin-right:2em; } ul { margin-left: +2em; margin-right: +2em; } li { margin-left: +2em; margin-right: +2em; } </style></ pre></ code>
Dostaję :
para - pierwsza linia nagłówek listy przedmiot 1 punkt 2 lista zwiastunów para - ostatnia liniaSzczególnie chciałem sprecyzować te listy ielementy listy powinny mieć swoje lewe wcięcie INCREMENTED przez 2em, a prawe wcięcie DECREMENTED przez 2em, które dlatego użyłem wartości długości + 2em / -2em dla ich atrybutów marginesu lewego i prawego marginesu, które szczęśliwie firefox wydaje się honorować.
Ale myślę, że błąd polega na tym, że firefox stosuje margines na dole akapitu przed rozpoczęciem listy, kiedy NIE zakończyłem akapitu za pomocą </p> .
Negatywne wcięcie ostatniej linii akapitu jest prawdziwym zabójcą - jakimkolwiek pomysły, jak się go pozbyć?