菜单对齐难?试试Flex布局!
对于菜单排版,如何让菜名和价格左右对齐,中间虚线居中,想必让不少人头疼不已。
基于这个思路,你可以设定一个基准,例如100个“·”,但可能会面临对齐不准的问题。
Flex布局解决之道:
采用Flex布局,可以让布局更加灵活。
菜名和价格对齐:
对于菜名和价格,直接使用flex: 0 0 auto即可,超出部分隐藏或裁剪。
中间虚线:
中间虚线采用flex: 1 1 100%,然后使用以下方式之一绘制虚线:
- 线性渐变:使用background-image进行线性渐变。
- 伪元素边框:使用伪元素创建边框。
- 背景图:插入虚线背景图。