如何在<a href=""> tag?

Question

I need to align 4 images which are acting as a link and these links are under a div tag. I am not quite sure how to align them perfectly because two in the left seem to be aligned but the ones in the right are causing the issue. Can I have some suggestions on how to fix this please. Currently this is how it looks like:I assumed all the components will be aligned properly since they are under a div tag with the same class name.

下对齐多个图像

CSS

.pagelinks {
float: right;
margin-right: 48%;
display: inline-block;
}

.pagelinks a {
text-decoration: none;
}

JSP / HTMl代码

<display:setProperty name="paging.banner.full" value='<div class="pagelinks"> <a href="{1}"> <img src="../images/integration/FastLeft.jpg"/> </a> <a href="{2}"> <img src="../images/integration/SlowLeft.jpg"/> </a> | Page {5} of {6} <a href="{3}"> | <img src="../images/integration/SlowRight.jpg"/> </a><a href="{4}"> <img src="../images/integration/FastRight.jpg"/> </a></div>'/>
        <display:setProperty name="paging.banner.first" value='<div class="pagelinks"> <img src="../images/integration/FastLeft.jpg"/> <img src="../images/integration/SlowLeft.jpg"/> | Page {5} of {6} | <a href="{3}"> <img src="../images/integration/SlowRight.jpg"/> </a><a href="{4}"> <img src="../images/integration/FastRight.jpg"/></a></div>'/>
        <display:setProperty name="paging.banner.last" value='<div class="pagelinks"> <a href="{1}"> <img src="../images/integration/FastLeft.jpg"/> </a> <a href="{2}"> <img src="../images/integration/SlowLeft.jpg"/> </a> | Page {5} of {6} | <img src="../images/integration/SlowRight.jpg"/> <img src="../images/integration/FastRight.jpg"/> </div>'/>

Answer 1

查看提供的JSP代码段，您的标记不一致，因此请务必进行检查。接下来，展开CSS以设置图像的高度和宽度。

看看这个小提琴，看一个例子：an approach to conditional update

CSS

  [{"id":0,"name":"Kisnoush 1","description":"It's Very Good Book . you Must Read it","image":"Image"}
,{"id":1,"name":"Kisnoush 2","description":"It's Very Good Book . you Must Read it","image":"Image"}
,{"id":2,"name":"Kisnoush 3","description":"It's Very Good Book . you Must Read it","image":"Image"}
,{"id":3,"name":"Kisnoush 4","description":"It's Very Good Book . you Must Read it","image":"Image"}
,{"id":4,"name":"Kisnoush 5","description":"It's Very Good Book . you Must Read it","image":"Image"}
,{"id":5,"name":"Kisnoush 6","description":"It's Very Good Book . you Must Read it","image":"Image"}
,{"id":6,"name":"Kisnoush 7","description":"It's Very Good Book . you Must Read it","image":"Image"}
,{"id":7,"name":"Kisnoush 8","description":"It's Very Good Book . you Must Read it","image":"Image"}
,{"id":8,"name":"Kisnoush 9","description":"It's Very Good Book . you Must Read it","image":"Image"}
,{"id":9,"name":"Kisnoush 10","description":"It's Very Good Book . you Must Read it","image":"Image"
}]

Answer 2

所以小伙子们，我只是想出了影像。我将图像的像素更改为与其旁边的图像完全相同24 X 17.因此图像看起来是对齐的。请看下面的图片。