Warum funktioniert das 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>
Grundsätzlich sieht es so aus:
Para - erste Zeile Listenüberschrift & bu; Gegenstand 1 & bu; Punkt 2 liste trailer Para - letzte Zeile
(wobei & bu; mein Name für das Aufzählungszeichen des Listenelements ist).
Beachten Sie den enormen Abstand zwischen der ersten Zeile des Absatzes und die Zeile "Listenüberschrift". Wie kann ich das loswerden?
Das einzig zutreffende CSS-Attribut scheint jedoch "Zeilenhöhe" zu sein scheint keine Wirkung zu haben.
Warum ist die letzte Zeile des Absatzes weiter links eingerückt? als die erste Zeile?
Dies scheint ein Fehler im CSS-Rendering von Firefox 32 zu sein. Soll ich es als eins melden?
Antworten:
1 für die Antwort № 1Ich habe einen gemacht jsfiddle mit dem Code darin; Ich habe die Elemente mit Rahmen versehen, damit Sie sehen können, wo sich die einzelnen Elemente befinden.
Das p Um das Element befinden sich 4em-Ränder, sodass es vom linken Rand weggedrückt und um 4em vom oberen und folgenden Element weggedrückt wird.
Der Erste p Das Element ist auch falsch verschachtelt (Sie können kein ul in einem p), so geht der Browser davon aus, dass er vor dem geschlossen werden sollte ul beginnt
Die erste Zeile der Liste, "Listenkopf", ist nicht korrekt positioniert, da Text nicht direkt in der Liste zulässig ist <ul> Element - es muss sich entweder innerhalb eines <li> (ein Listenelement) oder außerhalb des <ul> Element.
Die letzte Zeile ("para - last line") befindet sich direkt innerhalb des body-Elements und hat daher nicht die 4em-Ränder, die auf die andere angewendet werden p Element.
Wenn Sie die massive Lücke loswerden möchten, ändern Sie die CSS für die p element um den 4em rand zu entfernen - so einfach ist das!
p { margin : 1em; }
Ich würde raten, etwas über die CSS-Box zu lesenmodellieren, damit Sie den Abstand, die Ränder und die Art und Weise, wie Elemente den Raum füllen, nachvollziehen können. Ich würde auch raten, Ihren gesamten Code (HTML und CSS) durch einen Validator zu leiten, um einfache Fehler wie den fehlerhaften abzufangen <p> Element, der "Listenkopf" -Text, der falsch in einem <ul> Element und das Unnötige + Zeichen in der CSS.
Ich habe Ihr HTML und CSS umgeschrieben, um eine vernünftigere Auswahl an Rändern und Rändern zu erzielen: siehe diese jsfiddle für Details. Die Grundlagen sind:
- Stellen Sie sicher, dass Ihr HTML-Code gültig ist.
- Verwenden Sie keine massiven Werte für die Ränder.
emist die Breite dermZeichen in der Schriftart, die Sie verwenden. 4em ist ein ziemlich großer Raum.
0 für die Antwort № 2
Vielen Dank für die obigen Antworten, aber sie sind nicht auf die Wurzel des Problems gekommen, IMHO: Die HTML 5 Spezifikation ( http://www.w3.org/html/wg/drafts/html/master/grouping-content.html#the-ul-element ) sagt:
4.4.6 Das ul-Element Kategorien: Flow-Inhalt. Wenn die untergeordneten Elemente des Elements mindestens ein li-Element enthalten: Tastbarer Inhalt. Kontexte, in denen dieses Element verwendet werden kann: Wo Durchflussinhalt erwartet wird.
Flow-Inhalt wird innerhalb eines <p> -Absatz-Tags erwartet, daher interpretiere ich das Ich kann also jedes Flow - Inhaltselement innerhalb eines Absatzes einfügen.
Da ich den Absatz nicht beendet habe, würde ich es auch tunhabe das nicht erwartet "Rand-unten" angewendet worden sein, erstellen Sie den großen Raum zwischen der ersten Zeile des Absatzes und dem Vornamen der Liste.
Jetzt ohne die für "p" angegebenen Eigenschaften "margin-left" und "margin-right":
<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>
Ich bekomme :
Para - erste Zeile Listenüberschrift Gegenstand 1 Punkt 2 liste trailer Para - letzte ZeileDiese Listen und wollte ich besonders spezifizierenListenelemente sollten ihre haben linker Gedankenstrich ERHÖHT um 2em und rechter Gedankenstrich ERHÖHT um 2em, was Aus diesem Grund habe ich die Längenwerte + 2em / -2em für die Attribute margin-left und margin-right verwendet, die Firefox zu ehren scheint.
Aber ich denke, der Fehler ist, dass Firefox den unteren Rand des Absatzes anwendet bevor die Liste beginnt, wenn ich den Absatz NICHT mit </ p> beendet habe .
Der negative Einzug in der letzten Zeile des Absatzes ist jedoch der wahre Killer - jeder Ideen, wie man es los wird?