开发者

CSS Shift Downward

开发者 https://www.devze.com 2023-01-06 22:55 出处:网络
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.

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.)

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号