菜名与价格对齐划线解决方法

菜品的名称和价格需要左右对齐，但中间的虚线或点样式该如何生成？

一种常见的做法是设置一个基准，例如100个点。当菜名多出一个字或价格多一位时，减少几个点。但这种方法可能无法完全对齐。

使用Flex布局

实用的图文表格ui布局

基于table, flex属性制作创意的用户个人简介图文表格列表ui布局特效。

下载

更好的解决方法是使用Flex布局：

• 对于左右两边的菜名和价格，设置flex: 0 0 auto即可，并根据需要设置超过多少宽度后显示省略号（…）。
• 对于中间的划线，设置flex: 1 1 100%，然后应用划线样式。

绘制划线样式

绘制划线有多种方法：

• 使用background-image线性渐变：background-image: linear-gradient(#000, #000 50%, transparent 50%, transparent)
• 使用伪元素边框：::before { content: ''; border-right: 1px dashed #000; }
• 使用背景图：自定义一个虚线背景图，然后将其应用到划线元素上。