Zapobiegaj łamaniu wiersza po </div>


95

Czy istnieje sposób, aby zapobiec podziałowi wiersza po elemencie div z css?

Na przykład mam

<div class="label">My Label:</div>
<div class="text">My text</div>

i chcesz, aby wyświetlał się jak:

Moja etykieta: mój tekst

Odpowiedzi:


152

display:inline;

LUB

float:left;

LUB

display:inline-block; - Może nie działać we wszystkich przeglądarkach.

Jaki jest cel używania divtutaj? Sugerowałbym span, ponieważ jest to element na poziomie liniowym, podczas gdy a divjest elementem blokowym.


Zwróć uwagę, że każda z powyższych opcji będzie działać inaczej.

display:inline;zamieni się divw odpowiednik a span. Będzie to wpływu margin-top, margin-bottom, padding-top, padding-bottom, height, itd.

float:left;zachowuje divjako element blokowy. Nadal będzie zajmował miejsce jak blok, jednak szerokość zostanie dopasowana do zawartości (zakładając width:auto;). Może wymagać clear:left;pewnych efektów.

display:inline-block;to opcja „najlepsza z obu światów”. divJest traktowany jako element bloku. Reaguje na wszystkie margin, paddingi heightzasad zgodnie z oczekiwaniami dla elementu blokowego. Jednak jest traktowany jako element wbudowany w celu umieszczenia w innych elementach.

Przeczytaj to, aby uzyskać więcej informacji.


3
Użyłem tagów DIV, ponieważ zostały automatycznie wygenerowane przez szablon
Fabiano

Element div z funkcją display: inline jest w zasadzie taki sam jak span. To kontener bez znaczenia semantycznego. Jedyną różnicą jest ich domyślny tryb wyświetlania (blok vs inline)
Joeri Hendrickx

Element div z wyświetlaczem: inline nie działa w Safari, i tak się psuje. Używam span.
Gustavo

tylko inline-block pomógł. Dzięki!
Drey

12
.label, .text {display: inline}

Chociaż jeśli tego użyjesz, równie dobrze możesz zmienić elementy div na span.


10

DIV jest domyślnie elementem wyświetlającym BLOCK, co oznacza, że ​​znajduje się we własnej linii. Jeśli dodasz atrybut display: inline CSS, będzie on zachowywał się tak, jak chcesz. Ale może zamiast tego powinieneś rozważyć SPAN?


7
<span class="label">My Label:</span>
<span class="text">My text</span>

5

Te divelementy są elementy blokowe, więc domyślnie biorą upp pełną dostępną szerokość.

Jednym ze sposobów jest przekształcenie ich w elementy wbudowane:

.label, .text { display: inline; }

Będzie to miało taki sam efekt, jak użycie spanelementów zamiast divelementów.

Innym sposobem jest unoszenie elementów:

.label, .text { float: left; }

Zmieni to sposób określania szerokości elementów, dzięki czemu thwy będzie tylko tak szeroki, jak ich zawartość. Spowoduje to również, że elementy będą unosić się obok siebie, podobnie jak obrazy przepływają obok siebie.

Możesz także rozważyć zmianę elementów. divElement jest przeznaczony do podziałów dokumentu, zazwyczaj użyć labeli do spanelementu do konstruktu w taki sposób:

<label>My Label:</label>
<span>My text</span>

4

Elementy div są używane do nadawania struktury witrynie lub do zawierania dużej ilości tekstu lub elementów, ale wydaje się, że używasz ich jako etykiety, powinieneś użyć span, automatycznie umieści oba teksty obok siebie i nie będziesz musiał pisać kod css do tego.

A nawet jeśli inni ludzie powiedzą ci, że musisz unosić elementy, najlepiej po prostu zmienić tagi.


3

Chyba nie widziałem tej wersji:

<div class="label">My Label:<span class="text">My text</span></div>

2
<div id="hassaan">
     <div class="label">My Label:</div>
     <div class="text">My text</div>
</div>

CSS:

#hassaan{ margin:auto; width:960px;}
#hassaan:nth-child(n){ clear:both;}
.label, .text{ width:480px; float:left;}

5
Możesz wyjaśnić swoją odpowiedź na korzyść OP
Luca

1

Spróbuj zastosować clear:noneatrybut css do etykiety.

.label {
     clear:none;
}

1
Nie ma to żadnego efektu, ponieważ divnadal ma wartość domyślną, width:autoktóra sprawia, że ​​zajmuje całą dostępną szerokość.
Guffa

0

spróbuj umieścić swoje divy w css

.label {
float:left;
width:200px;
}
.text {
float:left;
}

1
Pamiętaj, aby następny element clear: left;przywrócił dokument do normalnego przepływu.
Pete

0

Wiele razy udało mi się uzyskać elementy div bez podziałów linii po nich, bawiąc się atrybutem float css i atrybutem css szerokości.
Oczywiście po wypracowaniu rozwiązania trzeba je przetestować we wszystkich przeglądarkach, aw każdej z nich trzeba zmienić rozmiar okien, aby upewnić się, że działa w każdych okolicznościach.


0

użyj tego kodu dla normalnego div display: inline;

użyj tego kodu, jeśli używasz go w tabeli display: inline-table; lepiej niż w tabeli


0

spróbuj tego (w CSS), aby zapobiec łamaniu linii w divtekstach:

white-space: nowrap;
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.