HTML 按钮意外移动到下一行

Question

我有一个页面，我在其中显示搜索结果并在每个结果旁边放置一个按钮。然而，结果是图 1，按钮位于文本下方，而我希望图 2 的按钮与文本一致。为什么会这样？

HTML

<?php
while($row = mysql_fetch_array($sqlresult))
{
echo $row['personName'];
?>
<form action="http://website/delPerson.php" method="post">
<input type="submit" name="delete" value="Delete" class="deleteButton">
</form>
<br>
<?php
}
?>

Answer 1

您在 input 标签周围使用 form ，显然它必须像 block 级元素一样，所以您需要使用

form {
   display: inline-block;
}

这也将保留您的表单的 block 行为，但将是内联的。

---

此外，我使用的选择器是一个通用元素选择器，因此请确保将 class 分配给 form 元素，否则我提供的选择器将使所有你的 form 到 inline-block

所以会这样

form.class_name {
   display: inline-block;
}

Demo