Forçar a legenda a fluir em linha com a entrada que eles rotulam

Preciso do rótulo para ficar na mesma linha do campo de entrada que estão a rotular. Eu quero que esses elementos fluam como eles normalmente fariam quando a janela redimensiona, eu só quero que a etiqueta para ficar à esquerda da entrada que eles estão rotulando. Como faria isso? Alguma ideia?

<label for="id1">label1:</label>
<input type="text" id="id1"/>
<label for="id2">label2:</label>
<input type="text" id="id2"/>

respondeu: a resposta de Josiah Ruddell estava no caminho certo, usando um espaço em vez de div deu-me o comportamento correto. Obrigado!

<span style="white-space:nowrap">
    <label for="id1">label1:</label>
    <input type="text" id="id1"/>
</span>
<span style="white-space:nowrap">
    <label for="id2">label2:</label>
    <input type="text" id="id2"/>
</span>
Author: user366735, 2010-11-18
Source

6 answers

Põe os dois dentro de um nowrap. 
<div style="white-space:nowrap">
    <label for="id1">label1:</label>
    <input type="text" id="id1"/>
</div>
 33
Author: Josiah Ruddell, 2010-11-17 21:07:27

Põe o input no rótulo, e larga o atributo for 

<label>
  label1:
  <input type="text" id="id1" name="whatever" />
</label>
Mas, claro, e se quiser estilizar o texto? Basta usar um span. 
<label id="id1">
  <span>label1:</span>
  <input type="text" name="whatever" />
</label>
 9
Author: zzzzBov, 2010-11-17 21:19:12
Se queres que sejam parágrafos, usa-os. 
<p><label for="id1">label1:</label> <input type="text" id="id1"/></p>
<p><label for="id2">label2:</label> <input type="text" id="id2"/></p>

Ambos <label> e <input> são parágrafos e conteúdo de fluxo para que possa inserir como elementos do parágrafo e como elementos de bloco.

 0
Author: PhoneixS, 2014-04-16 17:01:29 
<style>
.nowrap {
    white-space: nowrap;
}
</style>

...

<label for="id1" class="nowrap">label1:
    <input type="text" id="id1"/>
</label>

Embrulhe as suas entradas na etiqueta

 0
Author: Omar, 2015-02-28 09:08:01

Http://jsfiddle.net/jwB2Y/123/

A seguinte classe CSS obriga o texto do rótulo a fluir em linha e a ser cortado se o seu comprimento for superior ao comprimento máximo do rótulo.

.inline-label { 
    white-space: nowrap;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    float:left;     
    }

HTML: 

<div>
    <label for="id1" class="inline-label">This is the dummy text i want to display::</label>
    <input type="text" id="id1"/>
</div>
 0
Author: Razan Paul, 2016-04-12 01:30:47

Porque não usas: 

label {
    display: block;
    width: 50px;
    height: 24px;
    float: left;
}
 -2
Author: cachaito, 2017-11-07 17:33:45