How to display html elements beside each other

Question

I have the following code inside my asp.net MVC Razor view:

<p>
@using (Html.BeginForm()) {
    @Html.ValidationSummary(true)
    @Html.HiddenFor(model => model.GroupID)
    @Html.Partial("_CreateOrEdit", Model)

    <input type="submit" value="Save" class="btn btn-primary"/>
}

@using (Html.BeginForm("Index", "SecurityGroup", FormMethod.Get))
{
    <input type='submit' value='Cancel' class='btn' />
}
</p>

How I can force the two <input /> elements to be displayed beside each other, instead of being under each other?

Answer 1

How to display HTML <FORM> as inline element?

A <p> element is only allowed to contain inline elements. <form> isn't inline, it's a block element. Try wrapping the forms in <div>s for example:

<div class="form-container">
    @using (Html.BeginForm()) {
    @Html.ValidationSummary(true)
    @Html.HiddenFor(model => model.GroupID)
    @Html.Partial("_CreateOrEdit", Model)

     <input type="submit" value="Save" class="btn btn-primary"/>
    }
</div>
<div class="form-container">
    @using (Html.BeginForm("Index", "SecurityGroup", FormMethod.Get))
    {
        <input type='submit' value='Cancel' class='btn' />
    }
</div>

Then use the following stylesheet (either as inline style or in a CSS)

.form-container{
    display:inline-block;
}

Answer 2

You could use a table to place the buttons next to each other:

<table>
  <tr>
    <td>
      @using (Html.BeginForm()) {
        @Html.ValidationSummary(true)
        @Html.HiddenFor(model => model.GroupID)
        @Html.Partial("_CreateOrEdit", Model)
        <input type="submit" value="Save" class="btn btn-primary"/>
      }
    </td>
    <td>
        @using (Html.BeginForm("Index", "SecurityGroup", FormMethod.Get)) {
          <input type='submit' value='Cancel' class='btn' />
        }
    </td>
</tr>

You can also check out the bootstrap navigation bar and div tags.

Answer 3

Add a class to this paragraph (or ID). Make this class (ID) to be displayed inline.

p.inlineParagraph{
    display:inline;
}

jsFiddle example