Can anyone tell me what is going on with this widget: http://davidbeckblog.com/notify/? The relevant CSS is mostly at the bottom of style.css.
Basicall开发者_如何学Cy, the widget has 3 sections. On the left is the button, the middle is the text box, and the right is a spot for a progress indicator. When I add in the text box and the progress indicator, everything gets pushed down.
Those are inline elements and the vertical align is baseline
by default I believe. Set the vertical align on all 3 spans to top
, and then it looks like you need to specify margin-top:-3px
on span.status and maybe apply 1px top margin to the notify me span.
Alternatively you could have floated all 3 with a clearing element.
This seems to fix it:
.notify-me input, .notify-me span {
vertical-align: top;
}
.notify-me input {
margin-top: 0.4ex;
}
(Try to avoid, fixed-pixel margins/padding, as these will more quickly bust when the user changes font sizes.)
精彩评论