css - 如何将无序列表堆叠成 2 个单独的行

Question

我完全被困住了，并为此苦苦挣扎了好几天，因为我不是开发人员，只是从论坛中学习。

我不能用价格和表格修改 li 类，限制代码块从我的电子商务平台生成它。我想让结果显示在两行中，顶部是数量，底部是价格。

96 150 300 450 600
8.06 7.66 7.26 6.86 5.97

li.QtyTabQty {
  display: inline-block;
  /* text-align: right; */
  border-right: 1px solid #fff;
  /* width: 100%; */
  /* float: right; */
  /* width: 100%; */
}
li.QtyTabPrc {
  display: inline-block;
  text-align: right;
  border-right: 1px solid #fff;
  /* width: 100%; */
  float: right;
}

<ul class="none">

  <li class="QtyTabQty">96</li>
  <li class="QtyTabPrc">$8.06</li>

  <li class="QtyTabQty">150</li>
  <li class="QtyTabPrc">$7.66</li>

  <li class="QtyTabQty">300</li>
  <li class="QtyTabPrc">$7.26</li>

  <li class="QtyTabQty">450</li>
  <li class="QtyTabPrc">$6.86</li>

  <li class="QtyTabQty">600</li>
  <li class="QtyTabPrc">$5.97</li>

</ul>

Answer 1

如果你想使用列表，你可以用 flexbox 来做:

.none {
  display: flex;
  flex-flow: column wrap;
  /* height is required */
  height: 50px;
}
.none li {
  list-style: none;
  flex: 1;
  /* Modify padding as required */
  padding: 0 7px;
}

<ul class="none">

  <li class="QtyTabQty">96</li>
  <li class="QtyTabPrc">$8.06</li>

  <li class="QtyTabQty">150</li>
  <li class="QtyTabPrc">$7.66</li>

  <li class="QtyTabQty">300</li>
  <li class="QtyTabPrc">$7.26</li>

  <li class="QtyTabQty">450</li>
  <li class="QtyTabPrc">$6.86</li>

  <li class="QtyTabQty">600</li>
  <li class="QtyTabPrc">$5.97</li>

</ul>