Question

以下包裹在“ 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>包裹起来可以正常工作，并在一行显示正确的页面上

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

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

当表单用<p>而不是<div>包裹时，按钮将换行：

代码...

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

结果...

请点击一下退出：
[退出按钮]

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

我不知道：

由于<div>和<p>都是块元素：<div>和<p>中这种意外不同行为的基本原因是什么？
有人知道一个简单的CSS解决方案，以使表单/按钮的“内嵌视图” 在“ p-tag”中工作吗？

感谢任何提示和答案！

Answer 1

p标签用于段落。当在p标签内使用form标签时，它只是关闭前一个开口p，然后在关闭form标签之后再次将其打开。（在Google Chrome浏览器上的最新消息中）也许在线上有一些官方文档，但是找不到。

即

这个

<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代码。

为什么样式为“ inline-block”的表单在“ div”中起作用而在“ p”中不起作用？

1 个答案: