html布局之图片文字混排

最新推荐文章于 2024-11-22 15:00:16 发布

原创最新推荐文章于 2024-11-22 15:00:16 发布 · 1w 阅读

8 ·

CC 4.0 BY-SA版权

CSS 专栏收录该内容

11 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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-btn li i {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 2px;
    vertical-align: middle;
    cursor: pointer;
}

.adminbtn a, .opts-btn li i, .seclist li b, .tableStyle tbody i {
    background-image: url(../images/sprite-opts.png);
    background-repeat: no-repeat;
}
.opts-btn>li>a {

        display: block;
        width: 65px;
        text-align: center;
        color:  #fff;
        white-space: nowrap;

}