Question

您好我遇到了一组5 ul列表的问题 -

我只是试图将它们全部垂直对齐在顶部，在那里＆＃34;巨型品种＆＃34;是

我拿出了HTML，因为它很长，但我添加了js fiddle link。

CSS：

＆＃13;

<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;
}

＆＃13;

Answer 1

你需要将div中的每个h1和ul包装在一起。然后将浮动应用于那些div。更改css，从ul中删除并添加到div：

 div{
     float:left
 }

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

Answer 2

我会选择不使用浮动工作来保持文档流完好无损。我使用了一个flexbox来对齐h1和ul周围的div。

Fiddle

如何并排显示多个列表？

2 个答案: