为什么我的输入没有对齐？答案

【问题标题】：why my inputs are not aligned?为什么我的输入没有对齐？
【发布时间】：2014-06-21 22:31:31
【问题描述】：

我需要一些帮助。我是css的新手，所以我不知道为什么我的输入“textarea”与其他输入不垂直对齐？向右多 1 或 2px...

这是我的 jsfiddle： http://jsfiddle.net/uxpedro/tDxc5/14/

form{
 width:255px;
 height:266px;
 margin: 0 auto;
 margin-top:200px;
}


input[type=text]{
  font-family:verdana;
  width:250px;
  height:40px;
  padding-left:5px; 
  background-color:rgba(255,255,255,0.95);
  border-style:none;
}

textarea{
  font-family:verdana;
  margin-top:30px;
  max-width:250px;
  min-width:250px;
  min-height:100px;
  max-height:200px;
  background-color:rgba(255,255,255,0.95);
  border-style:solid;
  border-color:rgba(215, 40, 40, 0.9);
 }

input[type=submit]{
  margin-top:-3px;
  width:250px;
  height:40px;
  color:white;
  background-color:rgba(215, 40, 40, 0.9);
  border-style:none;
  }

【问题讨论】：

您为textarea 设置了一个margin-top: 30px;。将其更改为margin-top:4px;
对不起，我不是很具体，我的意思是垂直对齐，“textarea”向右多1或2px...

标签： css input textarea

【解决方案1】：

Chrome 的用户代理样式表（也称为浏览器的“默认 CSS 样式”）为 textarea 指定 2px 的边距。由于您只声明了margin-top 属性，因此其余三个边距仍设置为2px，正如您在检查器中看到的那样（可通过右键单击文本区域并选择Inspect element 访问）。

要使其与其余部分保持一致，只需将 margin-top:30px 替换为 margin:30px 0 0 即可。

【讨论】：

【解决方案2】：

我发现问题出在你的 textarea 上的边框，不是提交按钮不够宽，而是 textarea 上的额外宽度。

在设置网站样式时记住盒子模型。

这是一个更新的小提琴，如果我把它搞砸了，我很抱歉我只是想让你更简单：http://jsfiddle.net/tDxc5/16/

尝试将表单的背景设置为红色，这样您现在可以看到所有内容都是表单的宽度（我认为这是您尝试做的。）

有几点：

我删除了除表单以外的所有内容，以便您轻松阅读。

需要注意的一条规则是box-sizing: border-box; - 它通常会计算您在元素上设置的内边距，因此如果您有宽度为 200 像素的东西并将内边距设置为 10 像素，它将变为 220 像素，因为您将所有边上的内边距设置为10像素。使用该规则，它将知道从初始宽度中减去 20px 以使其适合您实际设置的宽度。

我用 /> 关闭了您的输入，因为 jsfiddle 告诉我这样做，您不必这样做。

使用placeholder="" 代替value="" - 如何设置占位符样式：http://css-tricks.com/snippets/css/style-placeholder-text/

在这些情况下你真的不应该使用高度，因为你所做的 textarea 目的，我添加了一个resize: vertical; 以确保它不会超出表单元素。

希望这会有所帮助！

【讨论】：