HTML <Input> 按钮意外移至下一行

Question

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

超文本标记语言

<?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

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

form {
   display: inline-block;
}

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

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

所以它会像

form.class_name {
   display: inline-block;
}

演示