审查生成的结账操作行

CSS Flexible Box Layout Module Level 1 高级 6分钟找出 4处问题

在发布前审查这段生成的结账操作行。

把可收缩的订单摘要放在按内容定宽的支付按钮旁，并在窄屏上保留源顺序与焦点顺序。

HTML

<div class="checkout">
  <p class="summary">Total for account-with-a-long-name: $48</p>
  <button class="pay">Pay now</button>
</div>
<style>
  .checkout {
    display: flex;
    gap: 1rem;
    align-items: center;
  }
  .summary {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: inline-size 200ms;
  }
  .pay {
    order: -1;
    flex: 1;
  }
  @media (max-width: 30rem) { .checkout { flex-direction: row-reverse; } }
</style>

生成代码仅作示例，不代表任何特定模型

在试验场中打开

报告错误