不允许按钮标签中的 p 标签? [英] p tag in button tag not allowed?

问题描述

我有一个 元素，其中有一个

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

I have a <button> element and within it, a <p> element. The <p> element is used in combination with css, margin-top, in a class to vertical align the text within the button (the button has a specific height).

html 如下所示:

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

这很好用，文本像它应该的那样垂直对齐.但是，我在 Visual Studio 2012 中收到一条警告:

This works fine, the text is vertically aligned like it should be. However I get a warning inside visual studio 2012 saying:

元素p"不能嵌套在元素button"内.

Element 'p' cannot be nested inside element 'button'.

<小时>

我的问题: 为什么

元素不允许出现在

元素中?还有什么选择?

---

My questions: why isn't the <p> element allowed inside a <button> element? And what is the alternative?

推荐答案

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

That is correct, it isn't allowed, because;

• button的内容模型 元素是短语内容(没有交互式内容后代).
• 还有 p 只能用于流内容预计.

• The content model of button element is phrasing content (with no interactive content descendant).
• And the p can only be used where flow content is expected.

另一种方法是去掉 p 元素，而是使用带有 display: block:

An alternative is getting rid of the p element, and instead using a span element with display: block:

.anotherClass {
  display: block;
}

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

这篇关于不允许按钮标签中的 p 标签?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！