HTML 将元素放在同一行

Question

我有以下用于在 Asp.NET MVC 中上传文件(使用一些 Bootstrap css)的表单。现在，“清除”按钮位于输入字段下方；如何使其位于输入字段的右侧？

我考虑过使用 <table>一列用于输入字段，一列用于按钮，但它似乎不合适，当我尝试时，Visual Studio 给了我波浪线。

@using (Html.BeginForm("Index", "Uploader", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
    <div class="form-group">
        <input type="file" name="files" id="file1" />
        <button onclick="reset2($('#file1'));event.preventDefault()">Clear</button>
        <span class="field-validation-error" id="err1"></span>
        @Html.ValidationMessage("1")
    </div>

    <div class="form-group">
        <input type="file" name="files" id="file2" />
        <button onclick="reset2($('#file2'));event.preventDefault()">Clear</button>
        <span class="field-validation-error" id="err2"></span>
        @Html.ValidationMessage("2")
    </div>
... more file input fields
}

Answer 1

输入上的一个简单的 style="display:inline" 将按如下方式工作；

   <div class="form-group">
     <input type="file" name="files" id="file1" style="display:inline" />
        <button onclick="reset2($('#file1'));event.preventDefault()">Clear</button>
        <span class="field-validation-error" id="err1"></span>

    </div>

    <div class="form-group">
        <input type="file" name="files" id="file2" style="display:inline" />
        <button onclick="reset2($('#file2'));event.preventDefault()">Clear</button>
        <span class="field-validation-error" id="err2"></span>

    </div>

我敢肯定，有些人会比我的答案更好，但更具体的 Bootstrap 。

Fiddle

屏幕抓取