如何使用 asp.net mvc web 表单使按钮更靠近另一个按钮？答案

【问题标题】：How to use asp.net mvc web form to make button closer to another button?如何使用 asp.net mvc web 表单使按钮更靠近另一个按钮？
【发布时间】：2021-04-22 20:13:42
【问题描述】：

我有一个工作按钮，它内置在我的视图上的表单中，但 UI 看起来不太好，需要一些帮助才能将按钮放置在更靠近上传按钮的位置。下面是我在 View.cshtml 上的逻辑；

   @using (Html.BeginForm("Browse", "Week", FormMethod.Post, new { enctype = "multipart/form-data", @id = "upload" }))
    {
        

        @Html.ActionLink("Create New", "Create", routeValues: new { }, htmlAttributes: new { @class = "modal-link btn btn-primary" })



        <input type="file" id="fileUpload" name="upload" class="btn-primary" required style="display:none;" />
        <label for="fileUpload" id="button" class="btn btn-primary">Upload</label>
        <input type="submit" name="extract" class="btn-primary" required style="display:none;" />

       
    }
    @using (Html.BeginForm("ExportToExcel", "Week", FormMethod.Post, new { enctype = "multipart/form-data" }))
    {

        <div>
            <input type="submit" value="Extract" class="btn btn-primary" />
        </div>
    }

【问题讨论】：

标签： c# html asp.net-mvc razor

【解决方案1】：

对下中心执行此操作：

<style>
.closer {
 margin-top: 0px;
}
    </style>
<input type="submit" class="closer" value="Extract" class="btn btn-primary" />

对内联执行此操作：

@using (Html.BeginForm("Browse", "Week", FormMethod.Post, new { enctype = "multipart/form-data", @id = "upload" }))
    {
        

        @Html.ActionLink("Create New", "Create", routeValues: new { }, htmlAttributes: new { @class = "modal-link btn btn-primary" })



        <input type="file" id="fileUpload" name="upload" class="btn-primary" required style="display:none;" />
        <label for="fileUpload" id="button" class="btn btn-primary">Upload</label>
        <input type="submit" name="extract" class="btn-primary" required style="display:none;" />
       
    }
    @using (Html.BeginForm("ExportToExcel", "Week", FormMethod.Post, new { enctype = "multipart/form-data" }))
    {
<input type="submit" value="Extract" class="btn btn-primary" />
    }

【讨论】：

在表单本身的下方还是之后？就在Extract按钮之后？
告诉我什么两个按钮？
我看到了：上传
基本上上传按钮有自己的逻辑和工作，现在我想创建更接近的提取按钮，在上传按钮允许位置之间留有空间
你能不能截个图让它更容易看到。

【解决方案2】：

试试这个：

@using (Html.BeginForm("Browse", "Week", FormMethod.Post, new { enctype = "multipart/form-data", @id = "upload" }))
    {
        

        @Html.ActionLink("Create New", "Create", routeValues: new { }, htmlAttributes: new { @class = "modal-link btn btn-primary" })



        <input type="file" id="fileUpload" name="upload" class="btn-primary" required style="display:none;" />
        <label for="fileUpload" id="button" class="btn btn-primary">Upload</label>
        <input type="submit" name="extract" class="btn-primary" required style="display:none;" />

       
    }
    @using (Html.BeginForm("ExportToExcel", "Week", FormMethod.Post, new { enctype = "multipart/form-data" }))
    {

        
            <input type="submit" value="Extract" class="btn btn-primary" />
        
    }

【讨论】：

我错过了一个括号。
我可以看一下这个截图吗？
它是一样的，但没有 div 标签 div 标签是把它放在一个新的行