Question

我需要一些帮助。我是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;
  }

Answer 1

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

要让其与其他人保持一致，只需将margin-top:30px替换为margin:30px 0 0即可。

Answer 2

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

在为网站设计样式时，请记住框模型。

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

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

有几件事：

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

需要注意的一条规则是box-sizing: border-box; - 它通常会为你计算你在元素上设置的填充，所以如果你有200px的宽度和设置填充10px它会变成220px因为你将所有边的填充设置为10px。根据该规则，它将知道从初始宽度减去20px，使其适合您实际设置的范围。

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

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

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

希望这有帮助！

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

2 个答案: