在列表项上显示多个图标

Question

如何在列表项上放置多个图标？

特别是我想把它们放在箭头左侧列表项的右侧。

我已经尝试在列表项的<a>标记中放置2个图像，并使用css定位它们，但它没有按预期工作。

<li>
    <a href="#">
        <img src="images/16.png" class="ui-li-icon ui-corner-none icon1">
        <img src="images/16.png" class="ui-li-icon ui-corner-none icon2">
        Test
    </a>
</li>

任何帮助将不胜感激。我的尝试是jsfiddle。

Answer 1

您可以使用这样的绝对定位CSS和包装器DIV：

<li>
    <a href="#">
        Test
        <div class="rightImages right1">
            <img src="http://lorempixel.com/22/22/technics/1/" />
        </div> 
        <div class="rightImages right2">
             <img src="http://lorempixel.com/22/22/technics/2/" />                       
        </div> 
    </a>
</li>

然后CSS是

.rightImages {
    position: absolute;
    display: inline;
    top: 0px;
    bottom: 0px;
}
.right1 {
    right: 58px;
}
.right2 {
    right: 86px;
}
.rightImages img {
    position: absolute;
    margin: auto;
    bottom: 0; left: 0; top: 0; right: 0;
}

额外的包装DIV有助于垂直居中。根据您的实际图像大小，您需要调整right1和right2类。

  

以下是您更新的 FIDDLE