如何实现带对应价格列的列表双列布局（非长列表自动分栏场景）

你之前检索到的方案没法匹配需求的核心原因是：那些方案的目标是把内容很长的整个列表拆成多个竖排列展示，而你要的是每一个列表项的内部，把餐品名和价格拆成左右两栏，做整行级的对齐，两者的布局作用对象完全不一样，自然用不上。
因为你的数据源本身已经包含餐品名和对应价格，渲染每个<li>的时候直接把价格作为独立子节点插入即可，不需要额外调整接口逻辑，常用的可落地方案有两种：

方案1：CSS Grid 布局（推荐，对齐精度最高） #

这个方案不会因为餐品名称长度差异导致对齐错位，不管名字长短，价格列永远保持整齐的对齐位置，同时可以轻松实现示例里的竖线分隔、自动序号效果。
渲染完成后的HTML结构可以直接适配你现有的循环渲染逻辑（循环数据库条目时把对应价格填入即可）：

<ul class="menu-list">
  <li><span class="item-name">Burger</span><span class="item-price">6.99$</span></li>
  <li><span class="item-name">Fries</span><span class="item-price">2.99$</span></li>
  <li><span class="item-name">Coke</span><span class="item-price">1.99$</span></li>
</ul>

配套CSS代码：

/* 重置列表默认样式，开启自动序号计数器 */
.menu-list {
  list-style: none;
  padding: 0;
  width: 400px;
  counter-reset: menu-item;
}
.menu-list li {
  /* 单条目内做Grid双栏拆分：左栏占满剩余宽度，右栏按内容自适应宽度 */
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  padding: 0.25rem 0;
}
/* 自动给餐品名加序号，匹配示例效果 */
.menu-list .item-name::before {
  content: counter(menu-item) ". ";
  counter-increment: menu-item;
}
/* 实现两列中间的竖线分隔 */
.menu-list .item-price {
  border-left: 1px solid #ccc;
  padding-left: 1rem;
}

最终渲染效果和示例完全一致：所有餐品名左对齐，所有价格在固定位置右对齐，中间有分隔线，序号自动递增。

方案2：Flex 布局（兼容低版本浏览器场景） #

如果需要适配比较老的浏览器（比如IE10及以上），可以用Flex实现两端对齐，代码更简洁：

.menu-list {
  list-style: decimal; /* 直接用浏览器自带的列表序号，省掉计数器逻辑 */
  padding-left: 2rem;
  width: 400px;
}
.menu-list li {
  display: flex;
  justify-content: space-between; /* 实现内容左右两端顶齐 */
  align-items: baseline;
  padding: 0.25rem 0;
}
.menu-list .item-price {
  border-left: 1px solid #ccc;
  padding-left: 1rem;
}

避坑提醒 #

• 不要使用column-count、column-width这类CSS多列属性：这类属性是把整个列表的所有内容打散后从上到下填充到多列竖栏里，比如列表有6个条目时，会自动把前3个放到左列、后3个放到右列，完全达不到你要的“单行内餐品和价格对齐”的效果，这也是你之前搜不到匹配方案的核心原因。

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