像这种一个li里面有两个图标,怎样布局才会更好一点,我感觉我做的太复杂了
对<li>使用:before 和:after
<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 来修正垂直居中的问题。
给li一点padding-left 让左边的图标最为li的背景,右边插入img定位
<li>
<i class="left icon icon-xxx"></i>
<span class="text">yyyy</span>
<i class="right icon icon-zzz"></i>
</li>