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

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

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

ОТВЕТ: Ответ Иосии Радделл был на правильном пути, используя пролет вместо 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>

Ответы

Ответ 1

поместите их как внутри div с помощью nowrap.

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

Ответ 2

Поместите 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>

Ответ 3

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

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

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

Ответ 4

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

<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> являются содержимым абзаца и потока, поэтому вы можете вставлять элементы абзаца и элементы блока.

Ответ 5

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

...

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

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

Ответ 6

То, что я сделал, чтобы ввод не занимал всю строку, и чтобы можно было поместить ввод в абзац, я использовал тег span и display для встроенного блока

HTML:

<span>cluster:
        <input class="short-input" type="text" name="cluster">
</span>

css:

span{display: inline-block;}

Ответ 7

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

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