显示ul中的表格数据

Question

我有下面提到的结构：

＆＃13;

＆＃13;

* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

ul{
  list-style-type: none;
  padding: 0px;
  margin: 0px;
  width: 320px;
  position: absolute;
  background: #1f7f5c;
  color: #fff;
  max-height: 200px;
  overflow-y: scroll;
  overflow-x: hidden;
}

li {
  height: 50px;
  padding: : 12px;
  border-bottom: 1px solid #2a8664;
  /*display: table-row !important;*/
  display: table;
  width: 100%;
}

.parent {
  padding-left: 21px;
  font-size: 22px;
  display: table-cell;
  vertical-align: middle;
}

＆＃13;

<ul>
  <li><span class="parent"><span class="child">1</span><span>ABC1</span></span></li>
  <li><span class="parent"><span class="child">2</span><span>ABC2</span></span></li>
  <li><span class="parent"><span class="child">3</span><span>ABC3</span></span></li>
  <li><span class="parent"><span class="child">4</span><span>ABC4</span></span></li>
  <li><span class="parent"><span class="child">5</span><span>ABC5</span></span></li>
  <li><span class="parent"><span class="child">6</span><span>ABC6</span></span></li>
  <li><span class="parent"><span class="child">7</span><span>ABC7</span></span></li>
  <li><span class="parent"><span class="child">8</span><span>ABC8</span></span></li>
  <li><span class="parent"><span class="child">9</span><span>ABC9</span></span></li>
  <li><span class="parent"><span class="child">10</span><span>ABC10</span></span></li>
  <li><span class="parent"><span class="child">11</span><span>ABC11</span></span></li>
  <li><span class="parent"><span class="child">12</span><span>ABC12</span></span></li>
</ul>

＆＃13;

＆＃13;

＆＃13;

说明：

现在，我希望保持结构不变。我的意思是即使使用javascript或jquery也不允许在html中进行任何更改。简而言之，渲染的html应该看起来像它提到的那样，你无法改变它。

要求：

我想在列中显示数据。

的jsfiddle：

https://jsfiddle.net/Vishal1419/0bjvL00t/

更新

Answer 1

.parent {
padding-left: 21px;
font-size: 22px;
display: table;
vertical-align: middle;
height: 49px;
}
span.parent span {
display: table-cell;
border: 1px solid;
vertical-align: middle;
}

添加此

Answer 2

尝试限制列表的高度，以便数据自动流入列 在你的ul给  <ul id="fixColumnHeight">

#fixColumnHeight{ height: 300px; -webkit-column-count: 3; -moz-column-count: 3; column-count: 3; } #fixColumnHeightli { display: inline-block; }