如何在Typst中避免方块换行，制作对齐的简历技能进度条

你的代码里方块换行是因为默认每个方块都是块级元素，会自动换行。要实现横向进度条+右侧对齐，需要用横向容器包裹方块，再用弹性布局实现技能名称与进度条的左右分布。

修改后的代码如下：

#let skill(level: int, body) = {
  // 限制level在1-5之间，避免无效值
  let clamped-level = clamp(1, level, 5)
  // 弹性布局：技能名左对齐，进度条右对齐
  flex(
    justify: space-between,
    align: center,
    body,
    // 横向容器包裹所有方块，实现横向排列
    h(
      gap: 2pt, // 方块之间的间距，可按需调整
      for i in range(5) {
        square(
          width: 10pt,
          height: 10pt, // 显式设置高度，让方块是正方形
          fill: if i < clamped-level { black } else { none },
          stroke: black // 给空方块加边框，更清晰
        )
      }
    )
  )
}

// 使用示例
skill(level: 3)[Python]
skill(level: 5)[JavaScript]
skill(level: 2)[CSS]

关键修改说明： #

• 用h()容器包裹循环生成的方块，强制它们横向排列，解决换行问题。
• 外层用flex(justify: space-between)实现技能名称左对齐、进度条右对齐，确保多个技能项的进度条统一对齐。
• 添加了clamped-level限制等级范围在1-5，避免传入无效值导致异常。
• 给空方块添加了stroke: black边框，让进度条的视觉对比更明显，样式可按需调整。

内容的提问来源于stack exchange，提问作者Grui