Html 在列表项中浮动图像_Html_Css

Html 在列表项中浮动图像

html css

Html 在列表项中浮动图像,html,css,Html,Css,我使用的是如下所示的有序列表，我想在图像周围环绕第2个文本，应该放在右侧。此时，在向图像添加float:right:时，图像被推到有序列表的后面如何将文本环绕在有序列表中的项中的图像周围 ol{ 计数器复位：li； /*启动计数器*/ 列表样式：无； /*删除默认编号*/ *列表样式：十进制； /*继续使用IE6/7的默认编号*/ 字体：15px“投石机MS”，“lucida sans”；填充：0；边缘底部：4em；文本阴影：0 1px 0 rgba（255、255、255、.5）；

我使用的是如下所示的有序列表，我想在图像周围环绕

第2个文本，应该放在右侧。此时，在向图像添加

float:right:

时，图像被推到有序列表的后面

如何将文本环绕在有序列表中的

项中的图像周围

ol{
计数器复位：li；
/*启动计数器*/
列表样式：无；
/*删除默认编号*/
*列表样式：十进制；
/*继续使用IE6/7的默认编号*/
字体：15px“投石机MS”，“lucida sans”；
填充：0；
边缘底部：4em；
文本阴影：0 1px 0 rgba（255、255、255、.5）；
}
ol ol{
边缘：0.2米；
/*为内部列表添加一些左边距*/
}
.四舍五入名单a{
位置：相对位置；
显示：块；
填充：.4em.4em.4em.2em；
*填充：.4em；
边缘：.5em0；
背景：ddd；
颜色：#444；
文字装饰：无；
边界半径：.3em；
过渡：全部。3放松；
}
.四舍五入列表a：悬停{
背景：#eee；
}
.四舍五入列表a:悬停：之前{
变换：旋转（360度）；
}
.四舍五入名单a：之前{
内容：柜台（李）；
反增量：李；
位置：绝对位置；
左：-1.3em；
最高：50%；
保证金顶部：-1.3em；
背景#87ceeb；
高度：2米；
宽度：2米；
线高：2米；
边框：.3em实心#fff；
文本对齐：居中；
字体大小：粗体；
边界半径：2米；
过渡：全部。3放松；
}
.对{
浮动：对；
}

如果您想在这里使用float，那么与许多关于

float

的堆栈溢出问题不同，您实际上是在用它来实现它的目的您需要进行两项更改：

添加
```
clear
```
s以防止重叠。在这种情况下，看起来有必要添加一个显式的clearfix div；只需将图像本身清除（使用
```
.alignright:after
```
）就意味着

浮动

ol{
计数器复位：li；
/*启动计数器*/
列表样式：无；
/*删除默认编号*/
*列表样式：十进制；
/*继续使用IE6/7的默认编号*/
字体：15px“投石机MS”，“lucida sans”；
填充：0；
边缘底部：4em；
文本阴影：0 1px 0 rgba（255、255、255、.5）；
}
ol ol{
边缘：0.2米；
/*为内部列表添加一些左边距*/
}
.四舍五入名单a{
位置：相对位置；
显示：块；
填充：.4em.4em.4em.2em；
*填充：.4em；
边缘：.5em0；
背景：ddd；
颜色：#444；
文字装饰：无；
边界半径：.3em；
过渡：全部。3放松；
}
.四舍五入列表a：悬停{
背景：#eee；
}
.四舍五入列表a:悬停：之前{
变换：旋转（360度）；
}
.四舍五入名单a：之前{
内容：柜台（李）；
反增量：李；
位置：绝对位置；
左：-1.3em；
最高：50%；
保证金顶部：-1.3em；
背景#87ceeb；
高度：2米；
宽度：2米；
线高：2米；
边框：.3em实心#fff；
文本对齐：居中；
字体大小：粗体；
边界半径：2米；
过渡：全部。3放松；
}
ol.rounded-list>li:n第n个孩子（2）：之后{
内容：“；
显示：块；
明确：两者皆有；
}
ol.rounded-list>li:n第n个孩子（2）a{
显示：块；
浮动：左；
}
.对{
浮动：对；
}

对齐项