html - 使用CSS在两行中对元素进行排序

我正在自定义Magento 1.9付款方式选择器。它呈现一个dl列表，其中dt元素具有方法名称，dd元素具有方法信息。我想在第一行上并排渲染所有dt元素，在第二行上渲染dd方法。我尝试制作dl flex并在dt和dd元素上使用order，但未成功。

<dl id="checkout-payment-method">
   <dt id="dt_method_1"></dt>
   <dd id="dd_method_1"></dd>
   <dt id="dt_method_2"></dt>
   <dd id="dd_method_2"></dd>
   <dt id="dt_method_3"></dt>
   <dd id="dd_method_3"></dd>
</dl>

最佳答案

因此，尽管我不建议否定显式语义层次结构，但您确实有一些棘手的选择，例如；

#checkout-payment-method {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

#checkout-payment-method dt, #checkout-payment-method dd {
  margin: 0;
  width: 33%;
}

#checkout-payment-method dt {
  border: red 1px solid;
  order: 1
}

#checkout-payment-method dd {
  border: green 1px solid;
  order: 2
}

<dl id="checkout-payment-method">
   <dt id="dt_method_1">dt1</dt>
   <dd id="dd_method_1">dd1</dd>
   <dt id="dt_method_2">dt2</dt>
   <dd id="dd_method_2">dd2</dd>
   <dt id="dt_method_3">dt3</dt>
   <dd id="dd_method_3">dd3</dd>
</dl>

希望这会有所帮助，加油！

关于html - 使用CSS在两行中对元素进行排序，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/56226119/