CSS只能作用于输入框而不能作用于文本域。

Question

这是一个jsfiddle

http://jsfiddle.net/2GpmW/

当我设置css时，我做了以下操作：

.inputForm input[type="text"], .inputForm input[type="email"], .inputForm textarea, .inputForm select {
    border: none;
    color: #525252;
    height: 30px;
    line-height: 15px;
    margin-bottom: 10px;
    margin-right: 6px;
    margin-top: 2px;
    outline: 0 none;
    padding: 2px 0px 2px 5px;
    width: 400px;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    background: #DFDFDF;
    font-family: inherit;
    font-size: inherit;
}

正如您所见，CSS 应该应用于输入文本和文本区域，但由于某些原因，文本区域旁边的标签会下移，并且文本区域内的占位符垂直居中的位置与输入文本中的不同。

请回答以下问题：

1- 为什么会出现这种情况？

2- 如何解决？

非常感谢。

- Marco Dinatsoli

---

问题出在你的元素是内联的，你可以尝试在标签上使用 display:block，但可能会遇到跨浏览器的问题。更好的方法是将表单元素包含在 div 中。 - Chris Rymer

Answer 1

你必须使用这个：

textarea{
    vertical-align: top;
}

fiddle

vertical-align CSS属性指定内联元素或表格单元格的垂直对齐方式。

- Alex Char

---

vertical-align: top 更接近于其他两个标签的垂直定位。 - Jared Farrish

谢谢，但是你的 jsfiddle 和我的完全一样，没有任何改变。 - Marco Dinatsoli

@JaredFarrish 确实没错 :) - Alex Char

以下是有关编程的内容，请将其翻译成中文。请仅返回翻译后的文本。为您的努力加一分。非常感谢，系统允许时将接受它。 - Marco Dinatsoli

刚在所有主要浏览器上检查了一下，它没问题 :) - Alex Char

Answer 2

您需要在textarea和label上添加vertical-align:middle。

label, textarea{
 vertical-align: middle;
}

- JoJo

---

但不包括 !important，几乎不应该使用。 - Jared Farrish

@JaredFarrish 我同意，CSS中永远不要使用important :) - Marco Dinatsoli

+1 鼓励您的努力。不过，其他人先回答了，所以接受他的答案是公平的。希望我可以接受多个答案。 - Marco Dinatsoli