将输入提交放在与输入框相同的行上

Question

这可能很简单,但我不知道该怎么做.目前使用此代码,"查找"按钮位于输入"位置"框下方的行上.如何让它像大多数搜索框一样工作在右边的同一行？

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/

Answer 1

如果你想要你的文本框100% width和一个按钮,你可以这样做:我的小提琴

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

Answer 2

............ 演示

嗨，现在添加这个CSS

.fieldwrapper{
white-space: nowrap;
}

现场演示