在同一行上对齐html输入

有人可以给出一个简单的解决方案，例如，如何在同一行上对齐表单输入，例如，当我构建表单时，我可以让它们互相对齐它看起来很合理，但如果我把两个输入像textarea /文本旁边的另一个文本或按钮，我得到垂直对齐的差异。有没有办法解决这个问题，而不用摆弄边距和填充？在同一行上对齐html输入

例如：

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

来源

2011-12-20 Ryan Stortz

确保你没有清楚：留在某处 – zok 2012-06-20 21:19:54

您是否尝试过与垂直对齐CSS属性玩？

vertical-align:top;

这样一切都会看起来一致，你将不必玩边缘。

来源

2011-12-20 14:43:59 Rondel

textarea,input.button{display:inline-block;}

或

textarea,input.button{float:left;}

取决于哪种方式你挑你的垂直挑战

来源

2011-12-20 14:43:18

谢谢，但我可以让他们在同一行上，只是当我这样做时，他们是我垂直不同的地方无论如何，我尝试了这两种方式，并没有什么区别。 – 2011-12-20 14:46:19

你想要哪个路线？顶部还是平底？ – 2011-12-20 14:54:24

此外 - 请确保您有有效的文档类型，并使窗体块元素，因为你会得到更可靠的结果。 – 2011-12-20 14:57:38

<table> 
    <tr> 
    <td><input /></td> 
    <td><input /></td> 
    </tr> 
</table>

当然，它使CSS较真的蠕动，但它肯定容易...

来源

2011-12-20 14:44:04 ShaneBlake

而HTML纯粹主义者，和JavaScript纯粹主义者，以及一般网页开发人员... – David 2011-12-20 14:47:47

带来的仇敌... – ShaneBlake 2011-12-20 14:48:44

我喜欢这个想法，但我想从这个页面的表格移开，因为所有的内容正在加载。 – 2011-12-20 14:50:53

添加vertical-align似乎work for me：

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

来源

2011-12-20 14:44:42 David

太好了。我希望它能够跨浏览器工作 – 2011-12-20 14:51:25

@RyanStortz：不能肯定地说。我在Firefox 8.0上。似乎也在IE 9.0中工作。（虽然在后者有'textarea'这是丑陋的滚动按钮，你可能想明确地删除那些默认添加它们的浏览器。） – David 2011-12-20 14:53:59

是的，它是为我工作。我有一个简单的js函数，可以为每个换行符增加textarea的高度，所以它不是问题。 – 2011-12-20 14:57:01

通常可以使用display:inline-block;或float:left;你想要项目在顶部或底部进行清理？

在你的例子中，你还没有关闭输入类型，它应该是type='button' - 你错过了一个apos。

来源

2011-12-20 14:45:09

只要给float:left到textarea的

http://jsfiddle.net/2qdJc/2/

来源

2011-12-20 14:46:04

我真的有一个反对花车的东西，他们看起来对我来说太随意了，但是谢谢我认为我现在可以开始工作了。 – 2011-12-20 14:52:00

你可以做这样的事情（在我的情况下工作）：

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

来源

2014-09-30 08:20:24

简单而好的例子。谢谢。 – 2016-05-13 14:03:38

在同一行上对齐html输入

回答

相关问题