如何在Pug.js中将<button>标签嵌套在<a>标签内？

你遇到的问题核心是Pug的嵌套语法规则：在Pug里，同级元素需要保持相同缩进，子元素必须比父元素缩进一级（或者用行内嵌套符号）。你的代码里a和button是同层级写法，所以被解析成了兄弟元素，而非嵌套关系。

方案1：换行缩进实现嵌套 #

这是Pug最常用的嵌套写法，将button缩进一级，放在a的下方：

a
  button.btn.btn-tomato.mx-auto(type='button', style='width:50%; white-space: normal; opacity:0.8') Button text

方案2：行内嵌套（用冒号:） #

如果想写在同一行，可以用冒号:连接父元素和子元素，明确表示嵌套关系：

a: button.btn.btn-tomato.mx-auto(type='button', style='width:50%; white-space: normal; opacity:0.8') Button text

生成的正确HTML #

两种写法都会生成你期望的结果：

<a> <button class="btn btn-tomato mx-auto" type="button" style="width:50%; white-space: normal; opacity:0.8;">Button text</button> </a>

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