HTML 将元素放在同一行

Question

我有以下用于在 Asp.NET MVC 中上传文件的表单（使用一些 Bootstrap css）。现在 "Clear" 按钮位于输入字段下方；如何使其位于输入字段的右侧？

我考虑过使用 <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

屏幕抓取

HTML 将元素放在同一行

HTML placing elements in the same row

html

css

asp.net

asp.net-mvc

twitter-bootstrap