需要垂直對齊的跨度與輸入型=「文本」

Question

這裏是活鏈接：http://mrgsp.md:8080/awesome/foobar 點擊創建和保存後得到驗證消息（跨度），他們垂直對齊比文本輸入更高

如何垂直對齊它們與文本輸入相同？

Answer 1

如果所有項目都一致這樣一來，爲它們分配一個類，並使用：

position: relative; 
bottom: 5px; /* for example */ 

Answer 2

不完全確信你是如何生成在服務器端的標記，但這樣做的形式更好的辦法在無序列表中使用label - input對。製作label的內嵌塊，給它們一個寬度，然後使用vertical-align來使它們的對齊居中。

HTML：

<ul> 
    <li><label for="name">Name: </label><input id="name" name="name" type="text" /></li> 
    <li><label for="person1">Person 1: </label><input id="person1" name="person1" type="text" /></li> 
    <li><label for="hobby">Hobby: </label> 
     <select name="Hobby" id="hobby"> 
      <option value="0">not selected</option> 
      <option value="1">swimming</option> 
      <option value="2">gaming</option> 

     </select> 
    </li> 
</ul> 

CSS：

li label { 
    display: inline-block; 
    width: 80px; 
    vertical-align: baseline; 
    text-align: right; 
    margin-right: 20px; 
} 

li input, li select { 
    padding: 3px 4px 4px; 
    width: 300px; 
    border: 1px solid #ccc; 
    font-size: 13px; 
} 

請參見：http://jsfiddle.net/pCCsg/爲完整的例子。如果您無法更改標記，這仍然適用於您當前的HTML。只需將label和input, select選擇器替換爲您正在使用的類。