Impedisci interruzioni di riga dopo </div>

C'è un modo per evitare un'interruzione di riga dopo un div con css?

Per esempio ho

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

e vuoi che venga visualizzato come:

La mia etichetta: il mio testo

display:inline;

O

float:left;

O

display:inline-block; - Potrebbe non funzionare su tutti i browser.

Qual è lo scopo dell'utilizzo di un divhere? Suggerirei a span, poiché è un elemento a livello di riga, mentre a divè un elemento a livello di blocco.

Tieni presente che ciascuna opzione sopra funzionerà in modo diverso.

display:inline;trasformerà l' divequivalente di a span. Sarà influenzato da margin-top, margin-bottom, padding-top, padding-bottom, height, etc.

float:left;mantiene l' divelemento a livello di blocco. Occuperà ancora spazio come se fosse un blocco, tuttavia la larghezza verrà adattata al contenuto (ipotizzando width:auto;). Può richiedere una clear:left;per determinati effetti.

display:inline-block;è l'opzione "il meglio di entrambi i mondi". La divè trattato come un elemento di blocco. Risponde a tutte le margin, paddinge heightregole come previsto per un elemento di blocco. Tuttavia, viene trattato come un elemento in linea ai fini del posizionamento all'interno di altri elementi.

Leggi questo per maggiori informazioni.

.label, .text {display: inline}

Sebbene se lo usi, potresti anche cambiare i div in span's.

Un DIV è per impostazione predefinita un elemento di visualizzazione BLOCCO, il che significa che si trova su una propria riga. Se aggiungi la proprietà CSS display: inline, si comporterà nel modo desiderato. Ma forse dovresti considerare invece uno SPAN?

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

Gli divelementi sono elementi di blocco, quindi per impostazione predefinita prendono tutta la larghezza disponibile.

Un modo è trasformarli in elementi in linea:

.label, .text { display: inline; }

Ciò avrà lo stesso effetto dell'utilizzo di spanelementi invece di divelementi.

Un altro modo è far fluttuare gli elementi:

.label, .text { float: left; }

Ciò cambierà il modo in cui viene decisa la larghezza degli elementi, in modo che siano larghi solo quanto il loro contenuto. Farà anche fluttuare gli elementi l'uno accanto all'altro, in modo simile a come le immagini scorrono l'una accanto all'altra.

Puoi anche considerare di cambiare gli elementi. L' divelemento è inteso per le divisioni di documenti, di solito uso un labele un spanelemento per un costrutto come questo:

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

i div sono usati per dare struttura a un sito web o per contenere molto testo o elementi, ma sembra che tu li usi come etichetta, dovresti usare span, metterà entrambi i testi uno accanto all'altro automaticamente e non avrai bisogno di scrivere codice css per esso.

E anche se altre persone ti dicono di far fluttuare gli elementi, è meglio che tu modifichi semplicemente i tag.

Non credo di aver visto questa versione:

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

Prova ad applicare l' clear:noneattributo css all'etichetta.

.label {
     clear:none;
}

prova a far fluttuare i tuoi div in css

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

Molte volte sono riuscito a ottenere div senza interruzioni di riga dopo di loro, giocando con l'attributo css float e l'attributo css width.
Ovviamente dopo aver elaborato la soluzione devi testarla in tutti i browser, e in ogni browser devi ridimensionare le finestre per assicurarti che funzioni in tutte le circostanze.

usa questo codice per div normale display: inline;

usa questo codice se lo usi in table display: inline-table; meglio di table

prova questo (in CSS) per evitare interruzioni di riga nei divtesti:

white-space: nowrap;