Hello! 欢迎来到小浪云数据!

菜单对齐难?Flex布局如何帮您完美解决?


菜单对齐难?Flex布局如何帮您完美解决?

菜单对齐难?试试Flex布局!

对于菜单排版,如何让菜名和价格左右对齐,中间虚线居中,想必让不少人头疼不已。

基于这个思路,你可以设定一个基准,例如100个“·”,但可能会面临对齐不准的问题。

Flex布局解决之道:

采用Flex布局,可以让布局更加灵活。

菜名和价格对齐:

对于菜名和价格,直接使用flex: 0 0 auto即可,超出部分隐藏或裁剪。

中间虚线:

中间虚线采用flex: 1 1 100%,然后使用以下方式之一绘制虚线:

  • 线性渐变:使用background-image进行线性渐变。
  • 伪元素边框:使用伪元素创建边框。
  • 背景图:插入虚线背景图。

相关阅读