html - 按钮标签中的p标签不允许？

我有一个<button>元素，其中有一个<p>元素。 <p>元素在类中与css，margin-top结合使用，以垂直对齐按钮内的文本(按钮具有特定的高度)。

html看起来像这样:

<button class="someClass">
    <img ... />
    <p class="anotherClass">Caption</p>
</button>

这样可以很好地工作，文本应该像应该的那样垂直对齐。但是我在Visual Studio 2012中收到一条警告，说:



我的问题:为什么在<p>元素内不允许使用<button>元素？还有什么选择？

最佳答案

没错，这是不允许的，因为；

button 元素的内容模型为phrasing content(无interactive content后代)。

且 p 仅可用于需要flow content的地方。

一种替代方法是摆脱p元素，而将span元素与display: block结合使用:

.anotherClass {
  display: block;
}

<button class="someClass">
  <img ... />
  <span class="anotherClass">Caption</span>
</button>

关于html - 按钮标签中的p标签不允许？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/26002381/