html - 如何在 标签下对齐多个图像？

Question

我需要对齐 4 张图像作为链接，这些链接位于 div 标签下。我不太确定如何将它们完美对齐，因为左边的两个似乎对齐但右边的导致问题。我可以就如何解决这个问题提出一些建议吗？目前它是这样的:我假设所有组件都将正确对齐，因为它们位于具有相同类名的 div 标签下。

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 以设置图像的高度和宽度。

查看此 fiddle 以查看示例:https://jsfiddle.net/37f8n4v9/

CSS

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