静态布局和样式css问题

Question

像这种一个li里面有两个图标，怎样布局才会更好一点，我感觉我做的太复杂了

Answer 1

<li>
    <i class="left icon icon-xxx"></i>
    <span class="text">yyyy</span>
    <i class="right icon icon-zzz"></i>
</li>

Answer 2

<li>酒水、白酒</li>

<style>
li:before,li:after {
    float: left;
    width: 18px;
    height: 18px;
    content: '';
    background: url(第一张图片);
}
li:after {
    float: right;
    background: url(箭头图片);
}
</style>

其他的通过 line-height 及 margin 来修正垂直居中的问题。

Answer 3

对<li>使用:before 和:after

Answer 4

给li一点padding-left 让左边的图标最为li的背景，右边插入img定位