p标签不允许使用按钮标签吗？

Question

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

的HTML如下：

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

这工作得很好，文本垂直对齐像它应该是。不过，我在visual studio 2012中发出警告说：

元素'p'不能嵌套在元素'按钮'内。

---

我的问题：为什么不允许一个<button>元素内的<p>元素？什么是替代方案？

Answer 1

这是正确的，这是不允许的，因为;

• 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>

Answer 2

通常你不应该把块元素里面内联元素。

Answer 3

Visual Studio在这个问题上是正确的：没有HTML规范允许p在button，甚至没有相当自由的definition在HTML5 CR。

然而，浏览器实际上并不强制执行此限制（在这个意义上，他们执行如限购令span不能包含p：当他们看到一个<p>标签，他们含蓄地关闭打开的span元素）。所以你的代码“有效”，尽管它不能保证它能够继续工作（或者它可以在全部浏览器上运行）。

为使代码正式生效，请将p元素替换为span元素并对其进行设置。您也可以在其之前放置一个<br />标签，以确保即使在禁用CSS时也会出现换行符。要设置顶部边距，请将其设置为块或内嵌块。例如：

.anotherClass { 
 
    display: block; 
 
    margin-top: 1em; 
 
}

<button class="someClass"> 
 
    <img src="http://lorempixel.com/100/50" alt="Some text" /><br /> 
 
    <span class="anotherClass">Caption</span> 
 
</button>

Answer 4

由于P和其他一些标签不能按钮标签，最好的解决方法中使用，如其他人所说，是用一个风格SPAN标记。

基本上你把BUTTON标签看作“好像”它是你的SPAN标签的容器DIV。这样你可以设计你的整个按钮的样式。在我的例子中，我用一个模拟图标，模拟标题标记，模拟描述和按钮内的模拟按钮对其进行了设置。

我为视觉目的添加了一些额外的样式和格式，但您可以像想要的那样简单或复杂。

风格：

/* CSS Styling and classes example */ 

    /* style the main container */ 
    button { 
     background-color:transparent; 
     outline:none; 
     border:none; 
     cursor:pointer; 
     transition:0.2s; 
     padding:10px 15px; 
    } 

    /* what happens when you hover - optional */ 
    button:hover { background-color:#efefef; } 

    /* what happens when it's active - optional */ 
    button.active { background-color:#ccc; } 

    /* global style for the contained span tags within */ 
    button span { 
     display:block; 
     margin:5px auto 10px; 
    } 

    /* individually styling the inner span tags by class identifiers */ 
    button span.step { 
     background:#c33; 
     color:#fff; 
     padding:10px 2px 0 0; 
     font-size:1.75em; 
     font-weight:600; 
     width:40px; 
     height:40px; 
     border-radius:20px; 
    } 
    button span.title { font-size:2em; font-weight:600; } 
    button span.desc { font-size:1.05em; } 
    button span.btn { 
     margin:20px auto; 
     padding:5px 10px; 
     background:#c33; 
     color:#fff; 
    } 

HTML：

<!-- html code --> 
    <button class="customClass"> 
     <span class="step">1</span> 
     <span class="title">Title</span> 
     <span class="desc">My cool button description</span> 
     <span class="btn">Click Here</span> 
    </button> 

当然，你可以修改，添加和删除span元素，你认为合适，包括图像。