在同一行上对齐 html 输入
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8577123/
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
Aligning html inputs on same line
提问by Ryan Stortz
Can somebody give a simple solution as to how to align form inputs on the same line, for example, many times when I am building a form I can get them to align on top of each other and it looks sound, but if i put two inputs like a textarea/text next to another text or a button, I get vertical alignment differences. Is there a way to fix this without fiddling with the margins and padding?
有人可以就如何在同一行上对齐表单输入提供一个简单的解决方案，例如，很多次当我构建表单时，我可以让它们彼此对齐并且看起来很合理，但是如果我把两个输入像另一个文本或按钮旁边的文本区域/文本，我得到垂直对齐差异。有没有办法在不摆弄边距和填充的情况下解决这个问题？
ex:
前任：
<style type='text/css'>
form{
display:inline;
}
textarea{
font-size:25px;
height:25px;
width:200px;
}
input.button{
height:25px;
width:50px;
}
</style>
<form>
<textarea >Value</textarea><input type='button' class='button' value='Go'>
</form>
回答by Rondel
Have you tried playing with the vertical-align css property?
您是否尝试过使用 vertical-align css 属性？
vertical-align:top;
That way everything will look consistent and you won't have to play with margins.
这样一切都会看起来一致，你就不必玩保证金了。
回答by paulcol.
textarea,input.button{display:inline-block;}
or
或者
textarea,input.button{float:left;}
take your pick depending on which way your vertically challenged
根据您垂直挑战的方式来选择
回答by David
Adding a vertical-alignseems to work for me:
添加一个vertical-align似乎对我有用：
<style type='text/css'>
form{display:inline;}
textarea{width:200px;height:25px;font-size:25px;vertical-align:middle}
input.button{width:50px;height:25px;vertical-align:middle}
</style>
<form><textarea >Value</textarea><input type='button' class='button' value='Go'></form>
回答by Mike Sav
You can usually use display:inline-block;or float:left;Are you wanting items to be alighed at the top or bottom?
您通常可以使用display:inline-block;或float:left;您是否希望项目在顶部或底部对齐？
In your example you haven't closed the input type, it should be type='button'- you're missing an apos.
在您的示例中，您还没有关闭输入类型，它应该是type='button'- 您缺少一个 apos。
回答by Rohan Patil
Just give float:leftto the textarea
只给float:lefttextarea
回答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/
回答by ShaneBlake
<table>
<tr>
<td><input /></td>
<td><input /></td>
</tr>
</table>
Sure, it makes the CSS purists squirm, but it's certainly easy...
当然，这让 CSS 纯粹主义者感到不安，但这当然很容易......
