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

这可能很简单，但我不知道怎么做。当前，使用此代码，“查找”按钮位于输入“位置”框下方的行上。如何让它像大多数搜索框一样位于右边的同一行

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>

链接

---

这是因为您的输入字段设置为100%宽，没有为旁边的按钮留出空间

---

这是一个固定版本：

如果您希望文本框的宽度为

100%

，并且在文本框之外还有一个按钮，您可以这样做：

​

..

嗨，现在添加这个css

.fieldwrapper{
white-space: nowrap;
}

---

您需要

浮动

块元素，这样可以说它们并排出现<代码>内联元素，如

编辑：将
输入
字段保持为
100%
宽

潜在解决方案：

不过，我不支持这种解决方案，如果您保持输入文本字段
100%
宽度的动机是使按钮和字段看起来“无缝结合”，那么您应该使用网格或UI框架。我喜欢基础框架，这里可以看到一个可能的解决方案：（向下滚动到“用后缀动作输入”例子）
 
尝试跟随，宽度：50% 
input.field{width:50%}​

您可以这样做（在我的案例中使用）：

开始：


这里是一个演示：
您只需要知道按钮的宽度，它就可以工作。然后基本上给输入一个全宽，并将按钮置于右侧。填充是这样的，按钮后面没有文本：

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

如果你能把这段代码放进去，或者其他人可以开始修复你的代码，那就太好了好吧！我猜他需要100%的文本字段@外星人也许他需要-我的只是几十个可能的建议之一。如果他喜欢你的解决方案，那么我肯定他会把它标记为答案。是的，我想要100%的文本字段，对不起。@James无需道歉。这里有一些对你有用的想法。这就是我正在寻找的答案。非常感谢。不过，我5分钟内都无法给出答案。我已经为此奋斗了多年。有人能解释为什么溢出：隐藏使它工作，为什么没有它就不能工作吗？@KevinLawrence，添加溢出：隐藏（或除可见之外的任何其他值）会创建一个新的。这改变了div计算其宽度的方式来考虑浮动元素。请参阅编辑。我不知道你为什么要保持输入元素100%宽，你能详细说明一下吗？谢谢
input.field{width:50%}​

<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>

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

form {
  position: relative;
}

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

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