Horizontal Forms instead of vertical

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 ge开发者_JS百科t 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!

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.

You can either use

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 "";

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;
}

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 }