在 asp.net 应用程序视图中固定元素位置答案

【问题标题】：fixing element position in an asp.net application view在 asp.net 应用程序视图中固定元素位置
【发布时间】：2023-03-26 01:55:02
【问题描述】：

我有一个 asp.net 应用程序，其中存在样式问题。在一个视图中，我有这个 sn-p：

 @if (Model[0] > 5)
     {
         @Html.ActionLink("<<<<", "Projects_Management", new { inc = Model[0] - 5 }, new {@class="previous"})
     }

     @if (Model[0] < 5 * Model[2])
     {
     @Html.ActionLink(">>>>", "Projects_Management", new { inc = Model[0] + 5 }, new {@class="nextIcon"})
     }

CSS

.previous
{
     margin-left:10px;
     background: url('../images/previousIcon.png') no-repeat border-box right;
     display: block;
     width: 150px;
     height: 50px;
     text-indent: -9999px; /* hides the link text */
}
.nextIcon
{

        margin-left:80%;
     background: url('../images/nextIcon.png') no-repeat border-box right;
     display: inline-block;
     width: 150px;
     height: 50px;
     text-indent: -9999px; /* hides the link text */

}

但我有这个结果：

链接demo

这两个链接不在同一行。那么问题是什么：为什么它们不在同一条线上？如何修复我的代码？

【问题讨论】：

标签： .net css asp.net-mvc html razor

【解决方案1】：

.previous 类具有 display: block 样式，将其替换为 inline-block，就像 .next 类一样

【讨论】：

先生，请提供您的案例的 jsfiddle 链接
结果不一样。左键现在位于下一行，而不是右键。一种解决方案是删除 margin-left:80% 并将 float:right 添加到右侧按钮。