静态布局和样式css问题

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

阅读 3.1k
4 个回答
<li>
    <i class="left icon icon-xxx"></i>
    <span class="text">yyyy</span>
    <i class="right icon icon-zzz"></i>
</li>

<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>使用:before 和:after

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题