Question

我已经完全陷入困境，并且一直在努力解决这个问题，因为我不是开发人员，只是从论坛中学习。

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

96 150 300 450 600
8.06 7.66 7.26 6.86 5.97

＆＃13;

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

＆＃13;

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

＆＃13;

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>

Answer 2

另一种选择......非常接近你已有的选择。

＆＃13;

li.QtyTabQty {
  display: inline-block;
  position:absolute;
}
li.QtyTabPrc {
  display: inline-block;
  float:left;
  margin-top:30px;
  margin-right:10px;
}

＆＃13;

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

＆＃13;

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

2 个答案: