垂直對齊與表單輸入的怪異行爲

我正在玩引導表單元素，並注意到輸入類型文本的垂直對齊屬性不知何故影響附近標籤的位置。垂直對齊與表單輸入的怪異行爲

順便說一句，此輸入類型文本具有裕量底部10px來自引導樣式。

下面是代碼：

<!DOCTYPE html> 
<html> 
<head> 
    <title>Bootstrap 101 Template</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <!-- Bootstrap --> 
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen"> 
    <style> 
     input[type="text"] { 
      vertical-align: baseline; 
     } 
    </style> 
</head> 
<body> 
    <form action=""> 
     <span>Name</span> 
     <input id="name" type="text">  
    </form> 
    <script src="http://code.jquery.com/jquery.js"></script> 
    <script src="js/bootstrap.min.js"></script> 
</body> 
</html>

當我設置：

 input[type="text"] { 
      vertical-align: baseline; 
     }

我得到正常的定位：

enter image description here

但是，當我設置：

 input[type="text"] { 
      vertical-align: top; 
     }

我期待看到輸入元素將被定位，但insted的標籤元素改變其位置

enter image description here

當我設置：

 input[type="text"] { 
      vertical-align: bottom; 
     }

我再次看到進行定位的被應用到標籤元素：

我一直認爲會發生這樣的情況：

body元素將定義標籤和輸入元素所在的線框的線高度。之後，標籤和輸入元素將根據其相對於由主體元素定義的線框的垂直對齊屬性進行定位。

但是在這裏我看到，不知何故，chaging垂直對齊屬性的輸入元素影響標籤元素。有人能解釋爲什麼發生這種情況嗎

來源

2014-02-09 Rustam Issabekov

也許問題變得更清楚，如果你從屏幕上刪除所有其他元素。

使用默認設置vertical-align:baseline，輸入的基線與基線對齊到跨度。我已將元素的輪廓設爲紅色，並將它們對齊藍色的y座標。然後，這是當您將垂直對齊保留爲默認值時線框的樣子。現在

vertical-align:baseline

無論你的兩個元素頂端對齊

vertical-align:top

或底部

vertical-align:bottom

總體佈局保持不變。既然跨度不是輸入在頂部有邊距，沒有理由在這個線框和前面的元素（或者窗口的頂部）之間創建任何空格。
請記住，跨度在屏幕上沒有固定的位置。線框中的垂直點可以變化;就好像您在線框中的其他地方跨越了更大的字體大小一樣。

希望能夠解決問題！

因此，對原始問題的解決方案只是將一些頂部邊距應用於輸入。（或者，或者跨度，但你也應該改變它的顯示內聯塊，因爲跨度默認情況下不做邊距。）

來源

2014-02-09 15:02:28

真的很好答案的人:)讚賞！ –

垂直對齊與表單輸入的怪異行爲

回答

相關問題