Evite quebra de linha após </div>

Existe uma maneira de evitar uma quebra de linha após um div com css?

Por exemplo eu tenho

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

e deseja que seja exibido como:

Minha etiqueta: Meu texto

display:inline;

OU

float:left;

OU

display:inline-block; - Pode não funcionar em todos os navegadores.

Qual é o propósito de usar um divaqui? Eu sugeriria a span, pois é um elemento de nível embutido, enquanto a divé um elemento de nível de bloco.

Observe que cada opção acima funcionará de maneira diferente.

display:inline;transformará o divno equivalente a a span. Vai ser afetado por margin-top, margin-bottom, padding-top, padding-bottom, height, etc.

float:left;mantém o divcomo um elemento de nível de bloco. Ele ainda ocupará espaço como se fosse um bloco, porém a largura será ajustada ao conteúdo (assumindo width:auto;). Pode requerer um clear:left;para certos efeitos.

display:inline-block;é a opção "melhor dos dois mundos". O divé tratado como um elemento de bloco. Ele responde a todas as margin, paddinge heightregras como esperado para um elemento de bloco. No entanto, ele é tratado como um elemento embutido para fins de colocação em outros elementos.

Leia isto para mais informações.

.label, .text {display: inline}

Embora se você usar isso, você também pode alterar os div's para span's.

Um DIV é, por padrão, um elemento de exibição BLOCK, o que significa que fica em sua própria linha. Se você adicionar a propriedade CSS display: inline, ela se comportará da maneira que você deseja. Mas talvez você deva considerar um SPAN em vez disso?

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

o div elementos são elementos de bloco, portanto, por padrão, ocupam toda a largura disponível.

Uma maneira é transformá-los em elementos embutidos:

.label, .text { display: inline; }

Isso terá o mesmo efeito que usar spanelementos em vez de divelementos.

Outra forma é flutuar os elementos:

.label, .text { float: left; }

Isso mudará como a largura dos elementos é decidida, de modo que eles sejam tão largos quanto seu conteúdo. Isso também fará com que os elementos flutuem lado a lado, da mesma forma que as imagens fluem lado a lado.

Você também pode considerar a alteração dos elementos. O divelemento destina-se a divisões de documentos, geralmente uso um labele um spanelemento para uma construção como esta:

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

divs são usados ​​para dar estrutura a um site ou para conter muitos textos ou elementos, mas você parece usá-los como um rótulo, você deve usar span, ele colocará ambos os textos um ao lado do outro automaticamente e você não precisará escrever código css para ele.

E mesmo que outras pessoas digam para você flutuar os elementos, é melhor que você apenas altere as tags.

Acho que não vi esta versão:

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

Tente aplicar o clear:noneatributo css ao rótulo.

.label {
     clear:none;
}

tente flutuar seu div em css

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

Muitas vezes consegui obter divs sem quebras de linha depois deles, brincando com o atributo float css e o atributo width css.
Obviamente, depois de trabalhar na solução, você deve testá-la em todos os navegadores e, em cada navegador, redimensionar as janelas para se certificar de que funciona em todas as circunstâncias.

use este código para div normal display: inline;

use este código se você usá-lo na tabela display: inline-table; melhor do que na tabela

tente isto (in CSS) para evitar quebras de linha em divtextos:

white-space: nowrap;