Zapobiegaj łamaniu wiersza po </div>

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

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.

.label, .text {display: inline}

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

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?

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

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>

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.

Chyba nie widziałem tej wersji:

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

<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;}

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

.label {
     clear:none;
}

spróbuj umieścić swoje divy w css

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

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.

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

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

white-space: nowrap;