html - 将输入提交与输入框放在同一行

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% 宽度 并且旁边有一个按钮，您可以这样做:My Fiddle

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