如何水平显示项目的大项列表

Question

民间，

我有一个新的要求，要显示一个很大的项目列表..那就是..

<ul>
<li>one</li>
<li>two</li>
.
.
<li>forty</li>
</ul>

这必须显示为

one      Four
two      Five
three    Six...........Forty

或者

one      two      three....
...
... Forty

我是这个html / css的新手。内联和其他一些修复程序无法正常工作。请帮助一些jsfiddle工作示例。

注意：只需要在一列中显示3/4项，最多显示6到8列，如下所示。 提前致谢。

Answer 1

检查以下小提琴

<强> jsfiddle

<强> CSS：

ul li {
  list-style-type:none;
  display:inline-block;
  padding:5px 0;
  margin:5px 2%;
  background-color:red;
  width:20%;
  text-align:center;
}

Answer 2

CSS Columns将是一个选项：

＆＃13;

＆＃13;

ul {
  list-style-type: none;
  -webkit-column-count: 8;
  -moz-column-count: 8;
  column-count: 8;
  -webkit-column-gap: 5px;
  -moz-column-gap: 5px;
  column-gap: px;
  margin: 1em;
  padding: 0;
}
li {
  border: 1px solid grey;
}

＆＃13;

<ul>
  <li>List Item 1</li>
  <li>List Item 2</li>
  <li>List Item 3</li>
  <li>List Item 4</li>
  <li>List Item 5</li>
  <li>List Item 6</li>
  <li>List Item 7</li>
  <li>List Item 8</li>
  <li>List Item 9</li>
  <li>List Item 10</li>
  <li>List Item 11</li>
  <li>List Item 12</li>
  <li>List Item 13</li>
  <li>List Item 14</li>
  <li>List Item 15</li>
  <li>List Item 16</li>
  <li>List Item 17</li>
  <li>List Item 18</li>
  <li>List Item 19</li>
  <li>List Item 20</li>
  <li>List Item 21</li>
  <li>List Item 22</li>
  <li>List Item 23</li>
  <li>List Item 24</li>
  <li>List Item 25</li>
  <li>List Item 26</li>
  <li>List Item 27</li>
  <li>List Item 28</li>
  <li>List Item 29</li>
  <li>List Item 30</li>
  <li>List Item 31</li>
  <li>List Item 32</li>
  <li>List Item 33</li>
  <li>List Item 34</li>
  <li>List Item 35</li>
  <li>List Item 36</li>
  <li>List Item 37</li>
  <li>List Item 38</li>
  <li>List Item 39</li>
  <li>List Item 40</li>
</ul>

＆＃13;

＆＃13;

＆＃13;