Принуждение метки течь в линию с вводом, который они маркируют - PullRequest
Новая
       12

Принуждение метки течь в линию с вводом, который они маркируют

32 голосов
/ 18 ноября 2010

Мне нужно, чтобы метка оставалась в той же строке, что и поле ввода, которое они помечают.Я хочу, чтобы эти элементы текли так, как обычно, когда размер окна изменяется, я просто хочу, чтобы метка оставалась слева от ввода, которое они маркируют.Как бы я это сделал?Есть идеи? 

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

ОТВЕТ: Ответ Джосии Рудделл был на правильном пути, использование span вместо div дало мне правильное поведение.Спасибо! 

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

Ответы [ 6 ]

40 голосов
/ 18 ноября 2010

поместите их обоих в div с Nowrap. 

<div style="white-space:nowrap">
    <label for="id1">label1:</label>
    <input type="text" id="id1"/>
</div>
7 голосов
/ 18 ноября 2010

Поместите input в метку и отбросьте атрибут for 

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

Но, конечно, что если вы хотите стилизовать текст?Просто используйте span. 

<label id="id1">
  <span>label1:</span>
  <input type="text" name="whatever" />
</label>
0 голосов
/ 12 апреля 2016

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

Следующий класс CSS заставляет текст метки перетекать в строку и обрезается, если его длина превышает максимальную длину метки. 

.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 голосов
/ 21 августа 2014 
<style>
.nowrap {
    white-space: nowrap;
}
</style>

...

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

Оберните свои входные данные в тег метки

0 голосов
/ 16 апреля 2014

Если вы хотите, чтобы они были абзацем, используйте его. 

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

И <label>, и <input> являются абзацами и содержимым потока, поэтому их можно вставлять как элементы абзаца и как элементы блока.

0 голосов
/ 21 апреля 2011

Почему бы вам просто не использовать: 

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