Как отображать HTML элементы рядом друг с другом

Question

я следующий код в моем asp.net MVC Razor зрения:

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

Как я могу заставить два <input /> элементы, которые будут отображаться рядом друг с другом, вместо того, чтобы быть под друг друга?

Answer 1

How to display HTML <FORM> as inline element?

<p> элемент только могут содержать встроенные элементы. <form> не является встроенным, это элемент блока. Попробуйте обертывание формы в <div> с, например:

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

Затем используйте следующую таблицу стилей (либо встроенный стиль или в CSS)

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

Answer 2

Добавить класс к этому пункту (или ID). Сделайте этот класс (ID) отображаемым в строке.

p.inlineParagraph{ 
    display:inline; 
} 

jsFiddle example

Answer 3

Вы можете использовать таблицу для размещения кнопок рядом друг с другом:

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

Вы также можете проверить bootstrap navigation bar and div tags.