使用 CSS 对两行中的元素进行排序答案

【问题标题】：Sort elements in two lines using CSS使用 CSS 对两行中的元素进行排序
【发布时间】：2019-05-20 18:10:09
【问题描述】：

我正在自定义 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>

【问题讨论】：

dt 和 dd 是按照定义和描述的特定语义原因排列的。为什么不直接更改输出结构以适应您的目的，或者至少合并 aria-labelledby 之类的属性以实现最小等效？
嗨@ChrisW。 dt/dd 是由后台应用程序在此序列上生成的，要更改它，我必须更改 Magento 的核心，由于我们的更新管理政策，我不打算这样做。

标签： html css magento

【解决方案1】：

因此，虽然我不建议否定显式语义层次结构，但您确实有一些 hacky 选项，例如；

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

希望这会有所帮助，干杯！

【讨论】：