Получение кнопки и поля на одной строке в фиксированной ширине div - PullRequest
Новая
       6

Получение кнопки и поля на одной строке в фиксированной ширине div

1 голос
/ 16 мая 2011

У меня есть форма. Форма содержит текстовое поле внутри div. Кнопка следует за div, который содержит текстовое поле. По умолчанию кнопка появляется на следующей строке после текстового поля. Я хочу получить кнопку в той же строке, что и текстовое поле.

Сначала я поместил div, содержащий поле и кнопку, влево, и это сработало. Однако, когда я добавил фиксированную ширину в левый столбец div (div, который содержит все в левой части моей страницы, включая вышеупомянутую форму), кнопка снова перешла на следующую строку.

Почему это? Как вернуть кнопку на ту же строку, что и поле?

Вот моя форма: 

<div class="topic_form" style="display: block; ">
  <form accept-charset="UTF-8" action="/videos/507/topic_update" class="edit_video" data-remote="true" id="edit_video_507" method="post">
  <div style="margin:0;padding:0;display:inline">
    <input name="utf8" type="hidden" value="✓">
    <input name="_method" type="hidden" value="put">
    <input name="authenticity_token" type="hidden" value="0KkgG3U+Kck7SqZTTJ12Td7pLjEN9GEvKEwfRymqN7M=">
  </div>
  <div class="field">
<input class="topic_field ui-autocomplete-input" id="video_topic_names" name="video[topic_names]" size="30" type="text" autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true">
  </div>
  <input id="topic_submit" name="commit" type="submit" value="Add Topic">
  </form>
</div>

Я плаваю div.field и input#topic_submit влево, но это больше не работает после добавления фиксированной ширины к моему левому столбцу div.

Ответы [ 2 ]

3 голосов
/ 16 мая 2011

Вот рабочий код ... 

<div class="topic_form" style="display: block; ">
  <form accept-charset="UTF-8" action="/videos/507/topic_update" class="edit_video" data-remote="true" id="edit_video_507" method="post">
  <div style="margin:0;padding:0;display:inline">
    <input name="utf8" type="hidden" value="✓">
    <input name="_method" type="hidden" value="put">
    <input name="authenticity_token" type="hidden" value="0KkgG3U+Kck7SqZTTJ12Td7pLjEN9GEvKEwfRymqN7M=">
  </div>
  <div class="field" style="width:200px;float:left;">
<input class="topic_field ui-autocomplete-input" id="video_topic_names" name="video[topic_names]" size="30" type="text" autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true">
  </div>
  <input id="topic_submit" name="commit" type="submit" value="Add Topic">
  </form>
</div>

Я добавил следующую строку в .field 

style="width:200px;float:left;"

Если вы не добавите ширину div, то этобудет 100%. поэтому все, что добавляется после этого, идет во второй строке. Вам нужно установить ширину div, чтобы он работал ...

Надеюсь, это поможет !!!

1 голос
/ 16 мая 2011

Они появляются в отдельных строках, потому что DIV, обертывающий ваше текстовое поле, является блочным элементом. Если вы измените его на встроенный элемент, они должны появиться на одной строке. 

.field { display: inline; }
...