时间戳

首页 > 解决方案 > 为什么样式为“inline-block”的表单在“div”中有效，但在“p”中无效？

html - 为什么样式为“inline-block”的表单在“div”中有效，但在“p”中无效？

问题描述

以下包含在“div”中的“表单”代码正确：

<div>
    Please logout with a Click:
    <form style="display: inline-block;">
        <input type="hidden" name="var1" value="val1">
        <button type="submit">Logout-Button</button>
    </form>
</div>

注意：表单的样式为inline-block. 代码放在一个<div>.

包裹在<div>this 中可以正常工作，并且在页面上它在一行中显示正确：

请单击注销：[注销按钮]

但是将包装器从 'div' 更改为 'p' 会导致意外行为：

当表单被包裹在 a<p>而不是<div>按钮时，会换行：

编码 ...

<p>
    Please logout with a Click:
    <form style="display: inline-block;"> ... </form>
</p>

结果是 ...

请单击注销：
[注销按钮]

（当我使用inline而不是inline-block设置表单样式时的行为相同。）

我想知道：

感谢您的任何提示和答案！

标签： htmlcss

解决方案

p 标签用于段落。当在 p 标签内使用 form 标签时，它所做的只是关闭前一个打开的 p，然后在关闭 form 标签之后再次打开它。（至少在谷歌浏览器上）也许网上有一些官方文档，但找不到。

IE

这个

<p>
Please logout with a Click: 
<form style="display: inline-block; ">
    <input type="hidden" name="var1" value="val1">
    <button type="submit">Logout-Button</button>
</form>

渲染时会变成

    <body>
    <p>Please logout with a Click: </p>
<form style="display: inline-block; ">
            <input type="hidden" name="var1" value="val1">
            <button type="submit">Logout-Button</button>
        </form>
    <p></p>
    </body>

希望能帮助你理解。检查 chrome 上的 html 代码。

推荐阅读