如何對齊下<a href> tag?

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.如何對齊下<a href> tag?

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>'/>

來源

2017-05-26 Mike

你的html在哪裏？請提供一個工作示例 – Dekel

糟糕，我完全忘了。我編輯我的問題。 – Mike

但是您沒有提供html/working demo – Dekel

查看所提供的JSP片斷多張圖片，您的標記是不相符的，所以一定要檢查。接下來，展開您的CSS以設置圖像的高度和寬度。

看看這個小提琴看一個例子：https://jsfiddle.net/37f8n4v9/

CSS

.pagelinks img{ 
    height: 10px; 
    width: 10px; 
}

來源

2017-05-26 15:08:20 marchWest

我喜歡它，但在你的小提琴你把所有的元素下一個div標籤，而在我的情況下，我必須讓他們在三個不同的div這是因爲我使用一些jsp屬性。所以如果我使用你的片段，圖片仍然顯示相同。我認爲這是因爲我有三個div標籤。 – Mike

我複製了代碼片段中第一個JSP行的標記。就像我所說的，在每個JSP元素中仔細檢查一下你的標記，這也可以解決你的一些問題。 – marchWest

所以，球員，我想通了只圖像。我在最右邊改變了圖像的像素，與其旁邊的圖像完全相同24 X 17.因此圖像顯示爲對齊。請看下面的圖片。

來源

2017-05-26 16:55:54 Mike

如何對齊下<a href> tag?

回答

相關問題