Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.4k views
in Technique[技术] by (71.8m points)

html - Why aren't these elements with display:inline-block properly aligned?

I have a link with display set to inline-block, and next to it is a <div> with the same height. However, the <div> is somehow appearing offset downwards, and I'm not sure why.

Here's a jsFiddle: http://jsfiddle.net/2bWjx/1/

What's happening

#stats (grey) is appearing lower down than a.sector one-letter.

What I want to happen

#stats should be equally set (top and bottom at the same point) as a.sector one-letter.

I've been struggling with this for a while, and could use some help. Should be a simple fix!

Thanks for any help in advance!

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

You need to add vertical-align: top to whatever has display: inline-block.

See: http://jsfiddle.net/thirtydot/2bWjx/2/

The default vertical-align is baseline, which causes the problem you're seeing.

You can see the difference between the various possible values here: http://www.brunildo.org/test/inline-block.html


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...