在HTML中垂直创建多个列表

Question

我想使用html

垂直显示多个列表

像

+--------+---------------------------------------------+--+
| Global | Region Country Currency Account Type Entity |  |
+--------+---------------------------------------------+--+
| Global | Asia                                        |  |
|        | Africa                                      |  |
|        | Europe                                      |  |
|        | America                                     |  |
+--------+---------------------------------------------+--+

Here是我的小提琴链接 正确显示4行但最后2行的代码在前两行重叠

有人可以帮助我吗？

Answer 1

尝试替换：

ul li {
  display: inline-block;
  width: 20%;
}

人：

ul li {
  display: inline-block;
  margin-left:7px;
}

JSfiddle示例

Answer 2

我只是在重叠的margin顶部添加了一些额外的<ul>。

ul li ul {
  width: 100%;
  margin: 10px 0px;  /* notice the 10px: this creates 10px of vertical margin */
  padding:0px;       /* you could do the same thing with padding*/
}

请参阅the working, updated JSfiddle。