菜名与价格对齐划线解决方法
菜品的名称和价格需要左右对齐，但中间的虚线或点样式该如何生成？
一种常见的做法是设置一个基准，例如100个点。当菜名多出一个字或价格多一位时，减少几个点。但这种方法可能无法完全对齐。
使用Flex布局
更好的解决方法是使用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; }使用背景图：自定义一个虚线背景图，然后将其应用到划线元素上。
以上就是如何让菜名和价格对齐，并绘制中间的划线？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1558921.html
微信扫一扫 
支付宝扫一扫 
