按钮不会停留在我放入的div内，ejs

Question

我正在为网页使用ejs模板，并且遇到了布局方面的麻烦。我在<div>内有一个按钮，该按钮设置为显示：无（作为下拉菜单），并且在将鼠标悬停在上方时应该会显示出来。取而代之的是，应该位于下拉菜单中的按钮在其外部呈现，并且似乎与之没有任何关系。源ejs文件：

<button class="mdc-button mdc-button--raised dropdown" id="clear">
    Clear
    <div class="mdc-card dropdown-content">
        <p>Test</p>
        <button>TestButton</button>
    </div>
</button>

以及根据chrome的元素查看器生成的页面：

<button class="mdc-button mdc-button--raised dropdown" id="clear">
    Clear
    <div class="mdc-card dropdown-content">
        <p>Test</p>
    </div>
</button>
<button>TestButton</button>

<p>标签仍然正确显示

Answer 1

我不相信您可以将button元素放在button元素中。

在此处在MDN上试用：

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button

这是我输入到其实时编辑器中的示例输入。当您检查按钮时，您将获得与在帖子中共享的相同输出。

<button class="favorite styled"
        type="button">
  <button>Hello</button>
    Add to favorites
</button>

根据您需要按钮的位置，可以尝试设计外部或内部元素的样式以使其看起来像按钮！

Answer 2

我不相信您可以将button元素放在button元素中。