CSS向下移動

Question

任何人都可以告訴我這個小部件是怎麼回事：http://davidbeckblog.com/notify/？相關的CSS大部分在style.css的底部。

基本上，該部件有3個部分。左邊是按鈕，中間是文本框，右邊是進度指示器的位置。當我添加文本框和進度指示器時，所有內容都被推下。

Answer 1

這些是內聯元素，垂直對齊是baseline默認情況下，我相信。將所有3個跨度的垂直對齊設置爲top，然後看起來您需要在span.status上指定margin-top:-3px，並可能將1px的頂部邊距應用於通知我跨度。

另外，你可以浮動所有3與結算元素。

Answer 2

這似乎修復：

.notify-me input, .notify-me span { 
    vertical-align: top; 
} 

.notify-me input { 
    margin-top: 0.4ex; 
} 

（儘量避免，固定像素邊距/填充，如當用戶改變字體大小，這些將更快地胸圍。）