Question

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

html看起来像这样：

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

这很好用，文本是垂直对齐的。但是我在visual studio 2012里面发出警告说：

元素'p'不能嵌套在元素'button'中。

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

Answer 1

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

button元素的内容模型为phrasing content（没有interactive content后代。）
p只能用于预期flow content的地方。

另一种方法是删除p元素，而使用带有span的{{1}}元素：

＆＃13;

display: block

＆＃13;

.anotherClass {
  display: block;
}

＆＃13;

Answer 2

Visual Studio在此问题中是正确的：p中没有HTML规范允许button，甚至HTML5 CR中也不是那么自由definition。

但是，浏览器实际上并没有强制执行此限制（因为它们强制实施例如span不能包含p的限制：当他们看到时，他们会隐式关闭一个开放的span元素一个<p>标签）。所以你的代码“有效”，但实际上并不能保证它能继续工作（或者它可以在所有浏览器上运行）。

要使代码正式有效，请将p元素替换为span元素并设置样式。您可能还会在其前面添加<br />标记，以确保即使禁用CSS也会换行。要在其上设置上边距，请将其设置为块或内联块。示例：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

通常，您不应该将块元素放在内联元素中。

Answer 4

由于P和其他一些标签不能在BUTTON标签中使用，正如其他人所说，最好的解决方法是使用样式化的SPAN标签。

基本上你对待BUTTON标签＆＃34;好像＆＃34;它是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元素，包括图像。

不允许使用按钮标记中的p标记？

4 个答案: