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;
}

（尽量避免固定像素边距/填充，因为当用户更改字体大小时，这些会更快地破坏。）