HTML <input />按钮意外移动到下一行

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

您在form标记周围使用input，显然它必须类似于块级元素，因此您需要使用

form {
   display: inline-block;
}

这也将保留block的{​​{1}}行为，但也会内联。

---

此外，我使用的选择器是一般元素选择器，因此请务必为form元素分配class，否则我提供的选择器将使您的所有form成为form到inline-block

所以它会像

form.class_name {
   display: inline-block;
}

Demo

Answer 2

将display:inline添加到您的表单：

form{
    display:inline;
}

Answer 3

尝试使用CSS

whitespace: no-wrap;

类deleteButton。

但我认为最好的解决方案是之前建议的CSS

display: inline-block;

Answer 4

 <?php
    while($row = mysql_fetch_array($sqlresult))
    {
 ?>

        <form action="http://website/delPerson.php" method="post">
        <label> <?php echo $row['personName']; ?></label><input type="submit" name="delete" value="Delete" class="deleteButton"></td></tr>
        </form>


    <br>
    <?php
    }
    ?>

try this

Answer 5

试试这个

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