2013-10-31 37 views
0

我有一个asp.net应用程序,其中我有一个样式问题。在视图中我有这样的片段:在asp.net应用程序视图中固定元素位置

@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 */ 

} 

,但我有这样的结果:

image

链接demo

两个链接ar在同一行中。那么问题是什么:他们为什么不在同一条线上?我如何修复我的代码?

回答

1

.previous类有display: block风格,inline-block就像.next

+0

相同的结果:( –

+1

先生,请提供的jsfiddle链接到你的情况 – Hilmi

+0

http://jsfiddle.net/Lamloumi/8THyc/更换 –