将输入框和提交按钮放在同一行

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

Link http://jsfiddle.net/VL3Dj/

- James Willson

---

如果您将此代码放入http://jsbin.com或http://jsfiddle.net中，其他人就可以直接在该位置开始修复您的代码，这将非常好。 - Misha Reyzlin

好的！http://jsfiddle.net/VL3Dj/ - James Willson

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

- Mr. Alien

---

这就是我正在寻找的答案。谢谢你。不过我需要等待5分钟才能将其标记为答案。 - James Willson

多年来我一直在苦苦挣扎。有人能解释一下为什么加上 overflow: hidden 就能让它正常工作，而没有这个属性就无法正常工作吗？ - Kevin Lawrence

@KevinLawrence，添加overflow:hidden（或除visible以外的任何值）会创建一个新的块级格式化上下文（Block Formatting Context）。这会改变div计算其宽度的方式，以考虑其前面的浮动元素。 - TinMonkey

Answer 2

您好，现在需要添加以下CSS代码：

演示

.fieldwrapper{
white-space: nowrap;
}

Live demo

- Rohit Azad Malik

Answer 3

您只需要知道按钮的宽度就可以让其工作。然后，您基本上需要将输入框设置为全宽，并将按钮绝对定位到右侧。填充是为了防止文字出现在按钮后面：

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

- Dan H

Answer 4

由于您的输入字段设置为100％宽度，没有留下按钮旁边的空间。

以下是修复后的版本： http://jsfiddle.net/ThfES/1/

- Alan Shortis

---

我猜他需要一个100%的文本字段。 - Mr. Alien

@Alien 也许他会选择我的建议之一，但这只是众多可能性中的一个。如果他更喜欢你的解决方案，我相信他会将其标记为答案。 - Alan Shortis

是的，我想让文本字段100％，抱歉。 - James Willson

@James 不需要道歉。这里有一些适合你的想法。 - Alan Shortis

Answer 5

尝试以下代码，设置宽度为50%：

width:50%

input.field{width:50%}​

- Kaf

Answer 6

您需要将块元素float，以便它们并排显示。而inline元素如<a>和<span>默认情况下就是这样的。了解更多关于CSS盒模型的知识。

您的解决方案：http://jsfiddle.net/HBJtT/

编辑：保持input字段为100%宽度。

潜在的解决方案：http://jsfiddle.net/3TZL8/

我不支持这个解决方案，如果您想让输入文本字段100%宽度，以便按钮和字段看起来“无缝连接”，您应该使用网格或UI框架。我喜欢Foundation框架，一个可能的解决方案可以在这里看到：http://foundation.zurb.com/docs/forms.php（向下滚动到“带后缀操作的输入”示例）

- Gaurav Dadhania

---

请查看编辑。我不确定为什么您想要保持输入元素100％宽，请详细说明一下，谢谢。 - Gaurav Dadhania

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

- TheOne LuKcian