Menu
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).
The html looks like this:
<button class="someClass">
<img ... />
<p class="anotherClass">Caption</p>
</button>
This works fine, the text is vertically aligned like it should be. However I get a warning inside visual studio 2012 saying:
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?
449
This is not allowed. An <a> element may not be a descendant of another <a> element.
Instead, you only need to specify P tag to become inline-block element, so that button gets to its side. just like this “ <p style="display:inline-block; ”>" , cheers. Done.
The short answer is that ol elements are not legally allowed inside p elements.
For semantic purposes, content within the li element should be wrapped in a p tag. If there is more than one paragraph or section in a li , do not close the li until after the last element. This differs from the current standard, but is cleaner for accessible content.
That is correct, it isn't allowed, because;
button element is phrasing content (with no interactive content descendant).p can only be used where flow content is expected.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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
