Question

我需要一些css设计方面的帮助。我有一个textarea和一个按钮。我想和睦相处。但是，当我按下按钮时，按钮会在textarea下面。

    <textarea 
style="width:411px; margin-top: 3px; margin-left: 3px; height:50px;"
placeholder="Comment"></textarea>
<input type="submit" value="Do it!" style="Height: 50px;">

Answer 1

只需向两者添加vertical-align: top;，然后从texatrea

中删除margin-top即可

<textarea style="width:411px; margin-left: 3px; height:50px; vertical-align: top;" placeholder="Comment"></textarea>
<input type="submit" value="Do it!" style="Height: 50px; vertical-align: top;">

https://jsfiddle.net/a3epw1w4/1/

Answer 2

我建议你不要使用float（左或右）。可能会导致代码中出现其他对齐问题。

改为使用vertical-align:top和margin-top:3px（等于textarea的margin-top）

（默认输入为display:inline-block）

另外我建议你不要使用内联样式。阅读，编辑，更改，覆盖等等都是一种痛苦。

＆＃13;

<textarea style="width:411px; margin-top: 3px; margin-left: 3px; height:50px;" placeholder="Comment"></textarea>
<input type="submit" value="Do it!" style="Height: 50px;display: inline-block;margin-top:3px;vertical-align:top">

＆＃13;

Answer 3

将以下样式声明为输入按钮：

vertical-align: top;
margin-top: 3px;

代码段示范：

input[type="submit"] {
    vertical-align: top;
    margin-top: 3px;
}

<textarea style="width:411px; margin-top: 3px; margin-left: 3px; height:50px;" placeholder="Comment"></textarea>
<input type="submit" value="Do it!" style="Height: 50px;">

input元素默认计为inline-block个元素，这意味着您可以使用vertical-align，在这种情况下，根据需要垂直对齐。
已声明margin-top规则可以抵消由于其兄弟元素textarea具有相同margin-top属性而声明的元素上方创建的间距不足。

Answer 4

＆＃13;

input[type="submit"]{
	padding:5px 15px;
	vertical-align: top;
	margin-top:15px;
}

＆＃13;

<html>
<body>
<textarea  rows="4" cols="45" placeholder="Comment"></textarea>
<input type="submit" value="Do it!">
</body>
</html>

＆＃13;

此代码可以帮助您

Answer 5

使用vertical-align: middle;将所有内容对齐请将您的css和html

分开

textarea
{
  width:411px; 
  margin-top: 3px; 
  margin-left: 3px; 
  height:50px;  
  vertical-align: middle;
}
input
{
    height: 50px; 
    vertical-align: middle;
}

<textarea placeholder="Comment"></textarea>
<input type="submit" value="Do it!">

Answer 6

您可以使用 Flexbox ：

执行此操作

.parent {
  display: flex;
  align-items: center;
}

<div class="parent">
  <textarea style="width:400px; margin-right:5px" placeholder="Comment"></textarea>
  <input style="height:50px" type="submit" value="Do it!">
</div>

Answer 7

尝试以下代码：

<textarea placeholder="Comment" style="width: 411px; margin-top: 3px; margin-left: 3px; height: 50px; float: left;"></textarea>
<input type="submit" style="height: 50px; float: left; margin-top: 3px; margin-left: 3px;" value="Do it!">

Answer 8

您可以将float: left;添加到textarea和margin-top: 6px;margin-left: 10px添加到input，这会使其在一行中彼此相邻。

＆＃13;

<textarea 
style="width:411px; margin-top: 3px; margin-left: 3px; height:50px;float: left;"
placeholder="Comment"></textarea>
<input type="submit" value="Do it!" style="Height: 50px;margin-top: 6px;margin-left: 10px;">

＆＃13;

水平评论表单提交

8 个答案: