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

Это, наверное, просто, но я не знаю, как это сделать. В настоящее время с помощью этого кода кнопка "Найти" находится на строке ниже поля ввода "местоположение". Как заставить его сидеть на одной строке справа, как и большинство поисковых полей?

HTML

<div class="fieldwrapper">
<input id="field_location" class="field r2" placeholder="Town, City or Postcode" id="Postcode" name="Postcode" type="text" value=""><input type="submit" id="findbutton" value="Find" />
</div>

CSS

field { font-family:arial, sans-serif; border-color: #d9d9d9; border-top:solid 1px #c0c0c0; }
input.field{width:100%}

Ссылка http://jsfiddle.net/VL3Dj/

Ответ 1

Если вы хотите, чтобы ваше текстовое поле было 100% width и еще одна кнопка, вы можете сделать это следующим образом: My Fiddle

<input type="submit"value="Find" style="float: right" />
<div style="overflow: hidden; padding-right: .5em;">
   <input type="text" style="width: 100%;" />
</div>

Ответ 2

............ Демо

Привет, теперь добавьте этот css

.fieldwrapper{
white-space: nowrap;
}

Живая демонстрация

Ответ 3

Это потому, что ваше поле ввода установлено на 100% в ширину, не оставляя места для кнопки рядом с ним.

Вот фиксированная версия: http://jsfiddle.net/ThfES/1/

Ответ 4

Вам нужно знать только ширину кнопки, чтобы она работала. Затем вы в основном даете ввод полной ширины и позиции абсолютной кнопки справа. Отступы так что текст не находится за кнопкой:

    <form method="post" action="">
      <input type="text" name="search-str" id="search-str" value=""/>
      <button type="submit">Submit</button>
    </form>

Что касается CSS:

form {
  position: relative;
}

input {
  width: 100%;
  padding-right: 40px;
}

button {
  width: 40px;
  position: absolute;
  top: 0;
  right: 0;
}

Ответ 5

Вам нужно float блокировать элементы, чтобы они отображались бок о бок, так сказать. inline элементы, такие как <a> и <span> делают это по умолчанию. Подробнее о модели CSS Box.

Ваше решение: http://jsfiddle.net/HBJtT/

EDIT: сохранение поля input как 100% в ширину.

Потенциальное решение: http://jsfiddle.net/3TZL8/

Я не поддерживаю это решение, хотя, если ваша мотивация для хранения текстового поля ввода 100% широка, так что кнопка и поле выглядят "бесшовно вместе", вы должны использовать сетку или структуру пользовательского интерфейса. Мне нравится Foundation framework, возможное решение можно увидеть здесь: http://foundation.zurb.com/docs/forms.php (Прокрутите вниз до примера "Ввод с помощью действия postfix" )

Ответ 6

Попробуйте следующее: ширина: 50%

input.field{width:50%}

Ответ 7

Вы можете сделать что-то вроде этого (работал в моем случае):

<div style="width:150px"><p>Start: <input  type="text" id="your_id"></p> 
  </div>

<div style="width:130px;margin-left: 160px;margin-top: -52px">
<a href="#" data-role="button" data-mini="true">Button</a>
</div>

Вот демо: http://jsfiddle.net/gn3qx6w6/1/