为什么单行跨度产生更高的按钮？

Question

所以我试图做一些花哨的单选按钮，我得到一些奇怪的影响。我想让它们都是统一的尺寸，但是我会根据跨度是否为一行或两行来获得不同的大小。我可以通过将<br>&nbsp;添加到单个衬垫的按钮名称末尾来修复它，但这看起来特别不雅。

请注意，我已经剥离了JS，因为在这一点上问题与CSS。

http://jsfiddle.net/aslum/BMbN2/2/

Answer 1

我会沟display: inline-block，齐齐float:left

http://jsfiddle.net/BMbN2/7/

您可能需要稍微调整你的其他值以获得您想要定位的按钮。

Answer 2

图像与最后一行文字的基线对齐。给.genreName额外的vertical-align:top似乎删除。

Answer 3

熟悉“vertical-align”css属性。这在这种情况下非常有用。 http://www.w3schools.com/cssref/pr_pos_vertical-align.asp - 此外，“行高”对嵌入块元素的高度具有重要意义。确保你正确地调整了这一点。

我会添加“vertical-align：middle;” #Action_ 冒险，＃有声读物，＃生物学 _Memoir和＃小鸡点燃元素。另外，一定要从'.genreName'类中移除高度。这会让事情变得更好一些。我还建议你将单选按钮放到它自己的div中并将它们浮动。

Answer 4

您的代码存在的问题是，跨度和单选按钮都呈现为块。如果左侧的跨度占用更多空间，单选按钮将被压下。这取决于浏览器如何呈现。

看来你希望它们在同一高度上彼此相邻。你应该使用float：left和float：right。