Jak mogę symulować <br/> (tag br) za pomocą CSS?

CSS:

.top, .title { 
font-weight: bold; 
} 
.bottom, .Content { 
}

HTML:

<span class='title'>Title</span> 
<br/> 
<span class='Content'>Content</span> 
<br/><br/>

chciałbym zastąpić tag <br/> o równowartości w CSS, ale Walczę z tym. Byłbym wdzięczny za każdą pomoc.

Próbowałem wypróbować margines-bottom, margin-top, line-height, żaden z nich nie działał.

Źródło

2012-02-07 user717236

Używałbyś marginesów, co rozumiesz przez "nic z tego nie zadziałało". Twoje klasy css nie mają związku ze znacznikami HTML. – devdigital

Masz rację co do klas CSS i znaczników HTML. Zmodyfikowałem pytanie. Dziękuję bardzo za wskazanie tego. To samo dotyczy marginesów, aczkolwiek, zgodnie z tym linkiem, http://www.codertools.com/css_help_guide/css_z-index.aspx, Firefox traktuje marginesy inaczej niż IE dla elementów znaczników span. – user717236

<span> jest elementem inline, więc nie mogło margin stosowane, ale może to potrwać padding - dać mu coś takiego .title { padding: 10px 0; } i będzie ona symulować akapit, lub po prostu .title { display: block; } zmusić następną rzeczą do zrobienia pod nim.

Źródło

2012-02-07 22:48:07 Joe

użycie display:block; na span,

jak:

.title, .Content { display:block; }

Źródło

2012-02-07 22:46:46 Shpetim

Cóż, problem jest, że używasz "rozpiętość", która jest zmienna inline. Musisz użyć elementu bloku, aby na przykład użyć marginesu-dołu.

Można spróbować to:

.top { 
    font-weight: bold; 
    display: block; 
} 
.bottom { 
    display: block; 
}

Albo można też użyć display: inline-block;

Źródło

2012-02-07 22:47:04 Chris

display: block; jednakże, <span> jest semantycznie prawdopodobnie niewłaściwym tagiem do użycia (będącym tagiem wbudowanym, a nie blokowym); <div> jest prawdopodobnie lepszym rozwiązaniem i ma bonus, który już wyświetla jako blok. Inne tagi mogą być jeszcze bardziej odpowiednie.

Źródło

2012-02-07 22:47:29

Semantycznie należy użyć znacznika nagłówka (h1, h2, itp.) Dla tytułu i znacznika akapitu (p) dla treści. Oba są elementami blokowymi, dla których działają takie rzeczy jak margin i line-height.

Znacznik jest elementem śródliniowym, który (dla wszystkich intencji i celów) oznacza, że ma on przechodzić w środku elementu blokowego bez bałagania reszty znacznika.

Jeśli naprawdę chcesz pozostać z rozpiętością, możesz wymusić, aby rozpiętość zachowywała się jak element blokowy, nadając mu właściwość CSS display: block. Zalecam jednak stosowanie rzeczywistych elementów blokowych, takich jak h1 lub p.

Źródło

2012-02-07 22:47:55 Jemaclus

Miałem podobne problemy podczas pracy z WordPress. Wordpress jest znany z automatycznego usuwania znaków formatujących z tekstu użytkownika dla artykułu na blogu. Moim wyzwaniem było wyśrodkowanie tekstu artykułu i podzielenie linii na dwie części.

To co zrobiłem:

<centrum> Jest to bardzo długi tytuł linia I mają być wyświetlane w moim <div> WordPress Tytuł artykułu Linia </div > </Centrum >

Działanie <centrum> jest dość oczywiste. Ponieważ element < div jest elementem blokowym, wydaje nową linię.

Mam nadzieję, że to pomoże.

Źródło

2013-01-25 02:13:22

Można symulować tagów BR szerokość CSS tak:

span:after { 
    content: ' '; 
    display: block; 
}

pomocą przełącznika ": przed" jeśli potrzebujesz "Br" były symulowane przed treścią przęsła

jsfiddle

Źródło

2013-11-04 22:30:21

Należy zauważyć, że nie tworzy to linii podziału dla elementów wbudowanych w blok. http://jsfiddle.net/luken/yNxF4/ – Luke

<style> 
p.break{ 
    display:block; 
    clear: both; 
} 
</style>

Źródło

2014-01-05 13:49:40 user3162041

Jak mogę symulować <br/> (tag br) za pomocą CSS?

Odpowiedz

Powiązane problemy