HTML将元素放在同一行中

Question

I have the following form for uploading files (using some Bootstrap css) in Asp.NET MVC. Right now the "Clear" button is below the input field; how to make it to the right of the input-field?

I thought about using <table> and have one column for the input fields and one for the buttons, but it doesn't seem suitable and Visual Studio gave me the squiggly lines when i tried.

@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

A simple style="display:inline" on the input will work as follows;

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

I'm sure that some will have a better answer than mine that is more bootstrap specific however.

Fiddle

Screen grab