Question

我想要达到以下目的：我有一个文本包装在一个p-tag和一个提交按钮以及一个包含在表单标签中的隐藏输入字段。我希望<p>标记中的文字和按钮显示在同一行，我该怎么做（使用css）？

<p>This is a example message text.</p><form method="POST"></input><input type="hidden" name="delete_message_id" value=" 1 "></input><input type="submit" value="delete"></input></form>

由于我希望将隐藏的输入字段与提交事件一起发送，因此我不能放弃包装表单标记。

Answer 1

默认情况下，<p>和<form>元素都显示为块元素。

更改'display'CSS属性以使其显示为内联：

p, form{
    display: inline-block;
}

此外，<input>标签是自动关闭的;你不包括</input>。（即使您这样做了，在打开</input>之后，您还有一个无效的<form>标记。

JSFiddle

Answer 2

尝试添加此css样式

<style>
p {
    display: inline;
}
</style>

或只设置元素样式

<p style="display: inline;">This is a example message text.</p><form method="POST"></input><input type="hidden" name="delete_message_id" value=" 1 "></input><input type="submit" value="delete"></input></form>

P标签旁边的表格

2 个答案: