如何彼此并排显示html元素 [英] How to display html elements beside each other

问题描述

我的asp.net MVC Razor视图中包含以下代码:

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>

如何强制两个< input/> 元素彼此并排显示，而不是在彼此下方显示?

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

推荐答案

如何显示HTML< FORM>作为内联元素?

< p> 元素仅允许包含内联元素.< form> 不是内联的，它是一个块元素.尝试将表单包装在< div> s中，例如:

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>

然后使用以下样式表(作为内联样式或CSS)

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

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

这篇关于如何彼此并排显示html元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！