Question

语言：PHP，HTML

嗨，我在制作一些代表房间的按钮时遇到了问题。每个按钮都标有房号，我试图让按钮并排。

        foreach($row1 as $row2)
        {
            echo "<form method='post' action='ss room details.php'>";
            echo "<button>".$row2."</button>";
            echo "<input type=hidden name=roomNum value=".$row2.">";
            echo "</form>";
        }
        echo "</td>";

垂直列出按钮，并为每个按钮创建一个新行。如何水平显示？

谢谢！

Answer 1

你想在每个人身上float: left;（CSS）。

然而，漂浮行为有时候很奇怪，所以你肯定想做一些谷歌搜索以了解它是如何工作的。

因此，要快速向您展示内联CSS，请修改原始代码：

foreach($row1 as $row2)
{
    echo "<form method='post' action='ss room details.php'>";
    echo "<button style=\"float: left;\">".$row2."</button>";
    echo "<input type=hidden name=roomNum value=".$row2.">";
    echo "</form>";
}
echo "</td>";

编辑：但是，使用内联CSS绝不是一个好主意，因此将CSS放在电子表格中是一个更好的主意：

button {
    float: left;
}

Answer 2

按钮可能不会水平地彼此相邻，除非您将每个按钮包含在单独的form元素中。在你的CSS中，你可以浮动form左：

form {
float: left;
}

您也可以浮动按钮 - 确保在不同的浏览器中尝试。包含CSS重置模板也不会有害。

Answer 3

您可以像@compeek一样使用

float:left

，也可以使用这样的中断标记：

foreach($row1 as $row2)
        {
            echo "<form method='post' action='ss room details.php'>";
            echo "<button>".$row2."<br/>";
            echo "<input type=hidden name=roomNum value=".$row2."><br/>";
            echo "</form>";
        }
        echo "";

Answer 4

我倾向于使用display: inline。这将使表单和按钮的行为与文本流中的普通元素相同。在必要时进行换行<br>。

form { display: inline }  
button { display: inline }

水平表格而不是垂直

4 个答案: