Wymuszanie na etykiecie przepływu liniowego z danymi wejściowymi oznaczonymi etykietą

Question

Potrzebuję etykiety, aby pozostała na tym samym wierszu, co pole wejściowe, które opisują. Chcę, aby te elementy płynęły tak, jak zwykle, gdy okno zmienia rozmiar, chcę tylko, aby etykieta pozostała po lewej stronie wejścia, które opisują. Jak to zrobić? Jakieś pomysły?

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

odpowiedział: odpowiedź Josiah Ruddell był na właściwej drodze, wykorzystując rozpiętość zamiast div dał mi poprawne zachowanie. Dzięki!

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

Answer 1

umieścić je wewnątrz div z nowrap.

<div style="white-space:nowrap"> 
    <label for="id1">label1:</label> 
    <input type="text" id="id1"/> 
</div> 

Answer 2

Umieść input w etykiecie, a rów atrybut

<label> 
    label1: 
    <input type="text" id="id1" name="whatever" /> 
</label> 

ale oczywiście for, co jeśli chcesz styl tekstu? Po prostu użyj span.

<label id="id1"> 
    <span>label1:</span> 
    <input type="text" name="whatever" /> 
</label> 

Answer 3

Dlaczego nie można po prostu użyć:

label { 
    display: block; 
    width: 50px; 
    height: 24px; 
    float: left; 
} 

Answer 4

Jeśli chcą być paragraf, a następnie użyć go.

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

Zarówno <label> i <input> są ustęp i przepływu materiałów, dzięki czemu można wstawić jako elementy akapitów i jako elementy blokowe.

Answer 5

<style> 
.nowrap { 
    white-space: nowrap; 
} 
</style> 

... 

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

owinąć wejść w Etykieta

Answer 6

http://jsfiddle.net/jwB2Y/123/

Poniższy CSS klasa siły tekst etykiety płynąć inline i uzyskać obcięty, jeśli jego długość jest większa niż max długości etykiety.

.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>