lt li gt html,使用CSS制作文字环绕图片效果（文字内容包含<li>标签） - IT技术博客 - 秋色园...

1.一般制作文字环绕图片效果。

HTML结构：

View Code

css制作图片环绕效果

• C#语言是一门优秀的面向对象语言
• C#语言是一门优秀的面向对象语言
• C#语言是一门优秀的面向对象语言
• C#语言是一门优秀的面向对象语言
• C#语言是一门优秀的面向对象语言
• C#语言是一门优秀的面向对象语言
• C#语言是一门优秀的面向对象语言

CSS样式：

#container

{

border:1px solid green;

width:600px;

/*页面水平居中显示*/

margin:0 auto;

}

#image_panel

{

float:left;

}

原始效果：

虽然达到了文字环绕图片效果，但是

呈现的列表项的形状在图片上面，不是和文字紧贴在一起。达不到我们预期的效果。

2.当文字中含有

• 和
• 标签时，我们通过向
  • 和
  • 标签添加CSS样式，list-style-position:inside;这样列表项前面的编号就和文字在一起，而不会出现在图片里面，影响设计效果。

    在CSS文件中添加如下2句话：

    #text_panel ul

    {

    list-style-position:inside;

    }

    #text_panel li

    {

    list-style-position:inside;

    }

    修改后的效果：

    

    

    作者: 快乐八哥 发表于 2011-06-20 23:24 原文链接