是否可以在html中的p标签内使用form和div标签？

I have been created simple web page using html, css and some scripts.

我已经使用html,css和一些脚本创建了简单的网页。

Here is my jsfiddle i tried: http://jsfiddle.net/67x8cyp9/

这是我试过的jsfiddle:http://jsfiddle.net/67x8cyp9/

<p>
 <img class="text-wrap" align="right" src="img/9780143332497.jpg">
 <div class="caption">
    <form method="get" action="9780143332497.png">
       <button type="submit">Download!</button>
    </form>
 </div>
</p>

Is it correct to use <form> tag and <div> tag inside <p> tag?

在

标签内使用

And also, how to set download button under the image?

还有,如何在图像下设置下载按钮?

Can anyone help me to fix this?

任何人都可以帮我解决这个问题吗?

Thanks in advance.

提前致谢。

2 个解决方案

#1

Its NOT recommended.

不推荐。

According to W3 specifications, <p> is only allowed to contain text or 'inline' (not 'block') tags. However a <form> counts as 'block' content not as 'inline' content(see this for Minimal Content Model in <p> tag). Alternately, you may use a <div> to enclose your <form>

根据W3规范,

仅允许包含文本或“内联”(非“块”)标记。但是,

You may validate your html code on w3 validator for better clarity.

您可以在w3验证器上验证您的html代码,以便更清晰。

Cheers!

#2

Not it is not, p is a block element, but cannot contain other block elements, only inline ones. (at least in HTML4, but I don't think HTML5 changes this behaviour).

不是不是,p是块元素,但不能包含其他块元素,只能包含内联元素。 (至少在HTML4中,但我认为HTML5不会改变这种行为)。

Hmm, according to MDN, you can put a form in a p, but actually what happens is that the end of the p is at the beginning of the form, so not very useful.

嗯,根据MDN,你可以把一个表单放在一个p中,但实际上发生的是p的结尾是在表单的开头,所以不是很有用。

Update:

To help you in your current actual problem, you can wrap the content in a div instead of a p:

为了帮助您解决当前的实际问题,您可以将内容包装在div而不是p中:

<div class="right-figure">
    <img class="text-wrap" src="img/9780143332497.jpg">
    <div class="caption">
        <form method="get" action="9780143332497.png">
             <button type="submit">Download!</button>
        </form>
    </div>
</div>

And in the CSS file:

在CSS文件中:

.right-figure {
     float: right;
}

This will do, what you need.

这样做,你需要什么。

Another approach:

By the way, you could also just use a link instead of a form:

顺便说一句,您也可以使用链接而不是表单:

<a href="9780143332497.png" target="_blank">Download!</a>

and format the anchor with CSS to look like a button, just like e.g. Twitter Bootstrap does.

并使用CSS格式化锚点看起来像一个按钮,就像例如Twitter Bootstrap确实如此。

#1