Объединение обернутых элементов

У меня есть несколько элементов в HTML, которые я хочу сгруппировать, когда они завертываются. Я думаю, что ответ кроется с некоторыми CSS (или, возможно, даже с JavaScript), но я не уверен. Например, у меня есть несколько элементов, описанных следующим образом:

Что происходит, пользователи иногда изменяют размер окна браузера, и в итоге мы получаем следующее:

В приведенном выше примере вход B не находится рядом с его элементом ввода. Есть ли способ сгруппировать ярлык и ввод, чтобы они обертывались вместе? Я пробовал divs и помещал элементы вместе в таблицу с "nowrap" со смешанными результатами. Я не против переноса строк, мне просто нужно сохранить ярлык и элемент ввода вместе.

Ответы

Ответ 1

Возможно, стоит также взглянуть на установку родительских divs вокруг каждой пары, которую вы хотите сохранить вместе - я знаю, что вы сказали, что попробовали это, но также дали им фиксированную ширину и отображение: inline; и он должен работать

ALSOO включает float: left/right; (выберите только один). Таким образом, если окно браузера слишком мало, чтобы показать их все бок о бок, вместо этого он возьмет конечную пару и выведет ее на следующую строку, но должен держите все элементы вместе и бок о бок.

Ответ 2

Попробуйте что-то вроде этого:

<label>First Name:
    <input type="text">
</label>
<label>Last Name:
    <input type="text">
</label>

и установите

label {
    display: inline-block;
}

Демо http://dabblet.com/gist/3145028

Альтернатива: оберните оба <label> и <input> в <div> с помощью display: inline-block

Ответ 3

Простым ответом является перенос элементов в другой элемент с дисплеем: встроенный блок как стиль. Так что...

<span class='wrapper'>
  <span class='left-side'></span>
  <span class='right-side'></span>
</span>

.wrapper {
  display: inline-block;
}

Ответ 4

Поместите все эти элементы в div следующим образом:

<div style="white-space: nowrap">
  ...
</div>

Ответ 5

Вы можете поместить каждую метку/группу ввода в <span>, а затем установить css в display:inline. Я уверен, что это сдержит его. В зависимости от вашего макета сайта и предыдущего CSS вам может потребоваться настроить css.

Ответ 6

Поскольку вы сказали, что это было в таблице, вот, вероятно, вы искали: http://jsfiddle.net/DX9G7/

HTML:

<table border="0" cellspacing="0" cellpadding="0">
    <colgroup>
        <col width="30%" />
        <col width="30%" />
        <col width="40%" />
    </colgroup>
    <tr>
        <td>
            <div class="form-row">
                <label>A</label>
                <input type="text" />
            </div>
            <div class="form-row">
                <label>B</label>
                <input type="text" />
            </div>
            <div class="form-row">
                <label>C</label>
                <input type="text" />
            </div>
        </td>
    </tr>
</table>

Теперь вы можете изменить свой css так, как вы хотите.