Html 将输入提交与输入框放在同一行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12858979/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Put input submit on same line as input box
提问by James Willson
This is probably simple but I dont know how to do it. Currently with this code the "find" button sits on the line below the input "location" box. How do I get it to sit on the same line to the right like most search boxes work?
这可能很简单，但我不知道该怎么做。目前使用此代码，“查找”按钮位于输入“位置”框下方的行上。如何让它像大多数搜索框一样位于右侧的同一行上？
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>
CSS
CSS
field { font-family:arial, sans-serif; border-color: #d9d9d9; border-top:solid 1px #c0c0c0; }
input.field{width:100%}
回答by Mr. Alien
回答by Rohit Azad
回答by Dan H
You only need to know the width of the button for it to work. Then you basically give the input a full width and position absolute the button to the right. The padding is so no text sits behind the button:
您只需要知道按钮的宽度即可使其工作。然后你基本上给输入一个完整的宽度并将按钮绝对定位到右边。填充是按钮后面没有文本：
<form method="post" action="">
<input type="text" name="search-str" id="search-str" value=""/>
<button type="submit">Submit</button>
</form>
As for the CSS:
至于CSS：
form {
position: relative;
}
input {
width: 100%;
padding-right: 40px;
}
button {
width: 40px;
position: absolute;
top: 0;
right: 0;
}
回答by Alan Shortis
It's because your input field is set to be 100% wide, leaving no space for the button beside it.
这是因为您的输入字段设置为 100% 宽，旁边的按钮没有空间。
Here is a a fixed version: http://jsfiddle.net/ThfES/1/
这是一个固定版本：http: //jsfiddle.net/ThfES/1/
回答by Gaurav Dadhania
You need to floatblock elements so they appear side-by-side, so to speak. inlineelements like <a>and <span>do this by default. Learn more about the CSS Box model.
可以float这么说，您需要阻止元素使它们并排出现。inline元素喜欢<a>并<span>默认执行此操作。了解有关 CSS 盒模型的更多信息。
Your solution: http://jsfiddle.net/HBJtT/
您的解决方案：http: //jsfiddle.net/HBJtT/
EDIT: Keeping inputfield as 100%wide.
编辑：保持input领域一样100%宽。
Potential solution: http://jsfiddle.net/3TZL8/
潜在的解决方案：http: //jsfiddle.net/3TZL8/
I do not support this solution though, if your motivation for keeping the input text field 100%wide is so that the button and the field look "seamlessly together", you should use a grid or a UI framework. I like Foundation framework, a possible solution can be seen here: http://foundation.zurb.com/docs/forms.php(Scroll down to "Input with a postfix action" example)
不过，我不支持此解决方案，如果您保持输入文本字段100%宽的动机是使按钮和字段看起来“无缝结合”，则应该使用网格或 UI 框架。我喜欢 Foundation 框架，可以在这里看到一个可能的解决方案：http: //foundation.zurb.com/docs/forms.php（向下滚动到“带有后缀操作的输入”示例）
回答by Kaf
Try following, width:50%
尝试以下，宽度：50%
input.field{width:50%}?
回答by TheOne LuKcian
You can do something like this ( worked in my case ):
你可以做这样的事情（在我的情况下有效）：
<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>
Here is a demo: http://jsfiddle.net/gn3qx6w6/1/
这是一个演示：http: //jsfiddle.net/gn3qx6w6/1/
