html布局之图片文字混排

最新推荐文章于 2024-08-14 21:47:37 发布

qq_34387948

最新推荐文章于 2024-08-14 21:47:37 发布

阅读量9.9k

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/qq_34387948/article/details/53305227

版权

本文介绍了如何在HTML中使用`<ul>`和`<li>`元素实现图片和文字的混合排列，提供了具体的效果展示和实现代码，帮助读者掌握这一布局技巧。

摘要由CSDN通过智能技术生成

1.ul li 中实现图片文字混排

a.效果如下：

b.实现代码如下

  <ul class="opts-btn">
              <li class="btn-quote"><a class="quote"><i class="icon-quote"></i>引用</a></li>
              <li class="btn-print"><a href="#"><i class="icon-print"></i>打印</a></li>
            </ul><!--opts-btn-->
<!--样式代码如下：-->
.opts-btn .icon-quote {
    background-position: 0 -5px;
}
.opts