如何並排顯示多個列表？

Question

您好，我遇到了一組5 ul列表的問題-

我只是想讓它們在“巨型品種”所在的頂部垂直對齊。

我刪除了HTML，因為它很長，但是我添加了js小提琴鏈接 。

CSS：

 <link href="https://fonts.googleapis.com/css?family=Lilita+One|Questrial|Sriracha" rel="stylesheet"> body ul { font-family: Questrial; font-size: 26px; } body h1 { font-family: Questrial; font-size: 26px; } span { font-family: Questrial; font-size: 16px; } ul { margin: 0; padding: 2px; list-style-type: none; float: left; display: inline-block; vertical-align: inherit; } 

Answer 1

您需要將每個h1和ul一起包裝在div中。 然后將浮點數應用於這些div。 更改CSS，從ul中刪除並添加到div中：

 div{
     float:left
 }

這是更新的小提琴： http : //jsfiddle.net/nvNTb/40/

Answer 2

我會選擇不使用浮點數來保持文檔流完整無缺。 我用了一個flexbox將h1和ul的div對齊。

小提琴