HTML 将元素放在同一行答案

【问题标题】：HTML placing elements in the same rowHTML 将元素放在同一行
【发布时间】：2015-01-22 07:57:13
【问题描述】：

我有以下表格用于在 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
}

【问题讨论】：

使用css。有很多方法可以做到这一点，例如 display: inline-block; 或 float: left; 或使用 positioning
一个input 元素和一个button 元素放在同一行，除非有什么特别的东西导致换行，可能是CSS 规则。请显示重现问题的实际 HTML 和 CSS 代码。
如果您使用的是引导程序，那么有一个名为 pull-right 的类可以完成这项工作。做一些谷歌搜索......

标签： html css asp.net asp.net-mvc twitter-bootstrap

【解决方案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>

我相信有些人会有比我的更好的答案，但更适合引导程序。

Fiddle

屏幕抓取

【讨论】：