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>
29
Author: user366735, 2010-11-18
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