1

所以我正在尝试制作一些花哨的单选按钮，我得到了一些奇怪的效果。我想让它们都统一大小，但我得到不同的大小取决于跨度是一两条线。我可以通过在单个衬里的按钮名称末尾添加来“破解”它来修复它<br>&nbsp;，但这似乎特别不雅。

请注意，我已经删除了 JS，因为此时问题出在 CSS 上。

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

4

4 回答 4

1

我会放弃display: inline-block并选择float:left

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

您可能需要稍微调整其他值以将按钮放置在您想要的位置。

于 2013-03-25T20:47:52.023 回答
1

图像与最后一行文本的基线对齐。给予.genreName额外的vertical-align:top似乎消除了这一点。

于 2013-03-25T20:49:38.527 回答
1

熟悉“vertical-align”css 属性。在这种情况下它非常有用。http://www.w3schools.com/cssref/pr_pos_vertical-align.asp - 此外，“line-height”对内联块元素的高度具有重要意义。确保您正在适当地调整它。

我会添加“垂直对齐：中间；” #Action_ Adventure、 #Audiobooks、#Biography _M ​​emoir 和#Chick-Lit 元素。此外，请务必从“.genreName”类中删除高度。这将使事情变得更好一些。我还建议您将单选按钮包装到它自己的 div 中并将它们浮动。

于 2013-03-25T20:55:01.730 回答
1

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

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

于 2013-03-25T20:55:52.760 回答