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

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 - 此外，“line-height”对内联块元素的高度具有重要意义。确保你正确调整它。

我想添加“vertical-align：middle;” #Action_ 冒险，＃Audiobooks，＃Biography _Memoir和#Chick-Lit元素。另外，请务必从'.genreName'类中删除高度。这将使事情变得更好一些。我还建议你将单选按钮包装在它自己的div中并将它们向右浮动。

Answer 4

代码的问题在于span和radio按钮都呈现为块。如果左侧的跨度占用更多空间，则按下单选按钮。这取决于浏览器的呈现方式。

您似乎希望它们在相同高度上彼此相邻放置。你应该使用float：left和float：right。