clearfix Problem mit UL li Tag
Ich benutze Clearfix, um den Float zu löschen. Aber das Problem ist, es gibt eine andere Höhe in <li> und <div> . li.clearfix height ist 32px, aber div.clearfix height ist 18px. Wenn ich .clearfix:before lösche, sind sie alle gleich.
Aber wenn es im Bootstrap versucht wird, ist es fehlgeschlagen. (Ich lösche die .clearfix:before im Bootstrap, aber es gibt immer noch einen Unterschied in der Höhe.)
Demo: Ссылка
Browser (Chrome Safari ie10, kein Problem in ff)
füge dieses ul{list-style: none;} den Höhen gleich hinzu.
2 Antworten
Clearfix wird verwendet, um das übergeordnete Element von floated-Elementen zum Erhalt einer Höhe zu zwingen. Dazu verwendet display: table für :before und :after pseudo-Elemente die Ränder der untergeordneten Elemente und verwendet clear: both auf dem Element :after , um den eigenen Float zu löschen. Zusammen ermöglicht dies, dass wir einen Clearfix anwenden können, ohne zusätzliches Markup zu benötigen.
Wenn wir das :before -Pseudoelement erzwingen, display: table nicht zu verwenden und stattdessen display: inline , können wir Ihr Problem mit dem unnötigen Leerraum lösen.
Gibt es einen Grund, warum Sie :after und :before als display:table; anstelle von display:block;
Etwa so: Ссылка
%Vor%Tags und Links html css twitter-bootstrap clearfix