带有图标的内联链接的 CSS 方法？

Question

我想要水平排成一行的 3 个链接，它们使用相同的 CSS 样式，但每个链接的左侧都需要一个小图标，例如 |首页 |关于 |联系……哪里|代表图标。

我可以接近使用

.nav a {
    padding-left:8px;
    line-height:17px;
    background-image:url(/admin/img/icon.gif);
    background-repeat:no-repeat;
    font-size:11px;
    height:17px;
    vertical-align:middle;
    display:block;
}

但这只适用于一个链接，我必须显示为“ block ”，我需要相同的效果，其中文本与图标垂直对齐，但将链接保持为内联元素，因此不同的宽度不是问题.

Answer 1

尝试使用 display:inline-block; 而不是 block。