Czy w czystym css, czyli bez dodawania dodatkowych tagów html, można zrobić podział wiersza <br>
? Chcę końca wiersza po <h4>
elemencie, ale nie przed:
HTML
<li>
Text, text, text, text, text. <h4>Sub header</h4>
Text, text, text, text, text.
</li>
CSS
h4 {
display: inline;
}
Znalazłem wiele takich pytań, ale zawsze z odpowiedziami typu „użyj wyświetlania: blok;” , czego nie mogę zrobić, kiedy <h4>
muszą pozostać na tej samej linii.
Odpowiedzi:
Działa to tak:
h4 { display:inline; } h4:after { content:"\a"; white-space: pre; }
Przykład: http://jsfiddle.net/Bb2d7/
Sztuczka pochodzi stąd: https://stackoverflow.com/a/66000/509752 (aby uzyskać więcej wyjaśnień)
źródło
\a
oznacza podział wiersza, znak U + 000A iwhite-space: pre
mówi przeglądarkom, aby traktowały to jako podział wiersza w renderowaniu.white-space
w:after
pseudo-elementu, który zawiera tylko końca linii. Jest to potrzebne, ponieważ w HTML, domyślnie, podział wiersza w treści elementu jest równoważny spacji i nie powoduje podziału wiersza w renderowanym dokumencie.Próbować
h4{ display:block;}
w twoim css
http://jsfiddle.net/ZrJP6/
źródło
margin-bottom
powinno Cię tam doprowadzić.margin-bottom
umieści h4 w tym samym wierszu co poprzedni tekst?Możesz użyć,
::after
aby utworzyć0px
blok -height po znaku<h4>
, który efektywnie przesuwa wszystko po<h4>
następnej linii:h4 { display: inline; } h4::after { content: ""; display: block; }
<ul> <li> Text, text, text, text, text. <h4>Sub header</h4> Text, text, text, text, text. </li> </ul>
źródło