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/
这是一个jsFiddle:http://jsfiddle.net/2bWjx/1/
What's happening
#stats (grey) is appearing lower down than a.sector one-letter.
#stats(灰色)显示低于a.sector一个字母。
What I want to happen
#stats should be equally set (top and bottom at the same point) as a.sector one-letter.
#stats应该与a.sector一个字母相同地设置(顶部和底部在同一点)。
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!
在此先感谢您的帮助!
1 个解决方案
#1
22
You need to add vertical-align: top to whatever has display: inline-block.
您需要将vertical-align:top添加到显示的内容: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
您可以在此处查看各种可能值之间的差异:http://www.brunildo.org/test/inline-block.html
#1
22
You need to add vertical-align: top to whatever has display: inline-block.
您需要将vertical-align:top添加到显示的内容: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
您可以在此处查看各种可能值之间的差异:http://www.brunildo.org/test/inline-block.html