Question

我希望删除按钮显示在浏览按钮的右侧。目前正在发生的是删除按钮正在出现。

请参阅下面的代码：

Image of remove button appearing under

<div class="filediv col-md-12">
    <!--  <i class="fa fa-upload" aria-hidden="true"></i>-->
    @Html.LabelFor(model => model.UploadFile, "Supporting file upload", new { @style = "", @class = "" })
    <p class="form-text text-muted">
        File upload restrictions are as follows:</p>
    <ul>
        <li>Do not upload any personal/confidential information</li>
        <li>File size: @Model.GetBytesasText() MB </li>
        <li>Format: @allowedFileTypes  </li>
    </ul>
    @Html.TextBoxFor(model => model.File, new { @style = "width: 300px;", @class = "form-control", @type = "file", id = "upload" })
    <!--<input type="submit" name="submit" value="Upload" />-->
    <div class="col-md-3 removebuttonone">
        <input type="button" value="Remove" class="btn btn-danger" />
    </div>
    @Html.ValidationMessageFor(model => model.UploadFile)
</div>

<div id="Uploadsecfile" class="filediv uploadsecfile col-md-12" style="display:none">
    <!--  <i class="fa fa-upload" aria-hidden="true"></i>-->
    @Html.LabelFor(model => model.UploadFile, "", new { @style = "", @class = "" })
    @Html.TextBoxFor(model => model.File, new { @style = "width: 300px;", @class = "form-control", @type = "file", id = "" })
    <!--<input type="submit" name="submit" value="Upload" />-->
    <div class="col-md-3 removebuttonone">
        <input type="button" value="Remove" class="btn btn-danger" />
    </div>
    @Html.ValidationMessageFor(model => model.UploadFile)
</div>

Answer 1

您有3个CSS选项：

进行浏览和删除按钮display:inline-block
制作删除按钮float:right。并在之后添加<div style='clear:both'></div>。
创建表格<table><tr><td>**Browse button**</td><td>**Remove button**</td></tr></table>

希望它会有所帮助

Answer 2

您已将表单控件类提供给文本框。哪个将占用div。所以你的按钮将被推到下一行。你需要把行分成两个不同的部分，比如这个

<div class="filediv col-md-12">
<div class = "row">
    <div class = "col-md-9">
    <!--  <i class="fa fa-upload" aria-hidden="true"></i>-->
    @Html.LabelFor(model => model.UploadFile, "Supporting file upload", new { @style = "", @class = "" })
    <p class="form-text text-muted">
        File upload restrictions are as follows:</p>
    <ul>
        <li>Do not upload any personal/confidential information</li>
        <li>File size: @Model.GetBytesasText() MB </li>
        <li>Format: @allowedFileTypes  </li>
    </ul>
    @Html.TextBoxFor(model => model.File, new { @style = "width: 300px;", @class = "form-control", @type = "file", id = "upload" })
@Html.ValidationMessageFor(model => model.UploadFile)
</div>

    <div class="col-md-3 removebuttonone">
        <input type="button" value="Remove" class="btn btn-danger" />
    </div>
</div>    
</div>

Codepen链接：http://codepen.io/anon/pen/XjVNwz

Answer 3

您可以尝试下面的代码，我可以看到您在页面上使用BootStrap。在引导程序中，您只需使用类名称即可浮动权限pull-right。请参考以下代码：

<div class="row">
        <div class="col-md-12">

            <div class="filediv col-md-6">
                <!--  <i class="fa fa-upload" aria-hidden="true"></i>-->
                @Html.LabelFor(model => model.UploadFile, "Supporting file upload", new { @style = "", @class = "" })
                <p class="form-text text-muted">
                    File upload restrictions are as follows:
                </p>
                <ul>
                    <li>Do not upload any personal/confidential information</li>
                    <li>File size: @Model.GetBytesasText() MB </li>
                    <li>Format: @allowedFileTypes  </li>
                </ul>
                @Html.TextBoxFor(model => model.File, new { @style = "width: 300px;", @class = "form-control", @type = "file", id = "upload" })
                <!--<input type="submit" name="submit" value="Upload" />-->
                <div class="col-md-3 removebuttonone">
                    <input type="button" value="Remove" class="btn btn-danger" />
                </div>
                @Html.ValidationMessageFor(model => model.UploadFile)
            </div>
            <!-- Button Div -->
            <div id="Uploadsecfile" class="filediv uploadsecfile col-md-6 pull-right" style="display:none">
                <!--  <i class="fa fa-upload" aria-hidden="true"></i>-->
                @Html.LabelFor(model => model.UploadFile, "", new { @style = "", @class = "" })
                @Html.TextBoxFor(model => model.File, new { @style = "width: 300px;", @class = "form-control", @type = "file", id = "" })
                <!--<input type="submit" name="submit" value="Upload" />-->
                <div class="col-md-3 removebuttonone">
                    <input type="button" value="Remove" class="btn btn-danger" />
                </div>
                @Html.ValidationMessageFor(model => model.UploadFile)
            </div>
        </div>
    </div>

希望它能解决你的问题。

由于

删除按钮出现在？

3 个答案: