Блог

Главная - Вопросы по программированию - как разместить встроенный div и ввод

как разместить встроенный div и ввод

#html #css #layout

#HTML #css #макет

Вопрос:

У меня есть html form . Есть много input «и label «. В нижней части у form меня есть один div и один input (отправить).

Как я могу разместить их ( div и input (кнопка отправки)) в одной горизонтальной строке?

Ответ №1:

Это один из подходов:

 <div>
    <div style="float:left">my div</div><input type="submit" style="float:left">
</div>

Ответ №2:

 div.someclass {
  float: left;
  width: 200px /* or whatever you need to make it look good */
}

или грубые встроенные стили с <div style="float: left;"></div><input type="submit" />

Ответ №3:

Создайте оба элемента float: left и сделайте их родительскими overflow: auto .

Не возражаете поделиться своим кодом? Это немного сложно сделать вслепую, так как ваша структура HTML может отличаться от того, что я думаю.

Комментарии:

1. inline-block не поддерживается IE, поэтому я обычно пытаюсь отклониться.

2. Я согласен. Это сделало бы жизнь намного проще, особенно для элементов навигации, жаль, что IE должен испортить Интернет. ; P

3. Встроенный блок работает в IE для элементов, которые изначально являются встроенными… например label , span , и т.д.

4. @ANeves, это потому, что IE к ним не применяется inline-block . Они просто остаются inline .

5. @Blender, если все было так, как вы говорите, то в IE7 все строки в этом примере должны выглядеть одинаково, что не так: jsfiddle.net/wPZwL/3

Ответ №4:

Можно настроить целевые типы ввода, например:

input [type=submit] { css rules here }

Таким образом, вы могли бы просто назначить свой div float:left; и сделать то же самое со своим input . Их перемещение приведет к тому, что они будут выстраиваться рядом друг с другом.

Пример здесь