爲什麼單行跨度產生更高的按鈕？

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。