Horizontal Forms instead of vertical - html

Question

Language: PHP, HTML
Hi, I am having an issue with making some buttons that represent rooms.
Each button is labelled with a room number and I am trying to get the buttons to be side by side.
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>";
The buttons are listed vertically and make a new line for each button. How do I display it horizontally?
Thanks!

Answer 1

The buttons wouldn't probably end up next to each other horizontally, except for the fact that you're including each one in a separate form element. In your css, you can float the form left:
form {
float: left;
}
You could also float the buttons, too -- make sure to try it in different browsers. Wouldn't hurt to include a CSS reset template too.

Answer 2

You can either use float:left like #compeek has mention or you can use break tags like this:
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 3

You want to float: left; (CSS) on each one.
However, floating acts kind of strange sometimes, so you'll definitely want to do some Googling to get a good idea of how it works.
So, to quickly show you with inline CSS, modifying your original code:
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>";
EDIT: It's never a good idea to use inline CSS, though, so putting the CSS in your spreadsheet is a much better idea:
button {
float: left;
}

Answer 4

I would tend to use display: inline. This will make the form and the button behave like normal elements in the text flow. Do a line break <br> where necessary.
form { display: inline }
button { display: inline }