Div+Css教程模板無(wú)憂>建站教程>Div+Css教程>Div+CSS教程>

li列表項(xiàng)標(biāo)簽中插入圖片浮動(dòng)出現(xiàn)的一種奇怪現(xiàn)象_Div+CSS教程

教程Tag：暫無(wú)Tag,歡迎添加,賺取U幣!

　　如下面的案例，若只對(duì)圖片應(yīng)用浮動(dòng)，F(xiàn)F下一切正常，但I(xiàn)E總多出來(lái)一行：

代碼調(diào)試框 [www.ghpqjb.com]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>無(wú)標(biāo)題文檔</title>
<style type="text/css">

* {
margin:0;
padding:0;
}
.phototext{
color:#999999;
text-align:left;
float:left;
font-size:12px;
list-style:none;
}
.phototext img{
margin:0 5px;
float:left;
}
.phototext666{
color:#666666;
}
.phototext li{
line-height:1.8em;
padding-left:5px;
}
.phototext li a, .phototext li a:hover{
color:#000000;
font-size:14px;
}
#soyi{
width:180px;
background-color:#FFCC00;
}

</style>
</head>
<body>
<div   class="znrj77z"   id="soyi">
  <ul class="phototext">
    <li><img src="http://p1.mb5u.com/divcss/preview_s01.jpg" alt="" width="72" height="82" class="photorim" /></li>
    <li><a href="#">藍(lán)色經(jīng)典</li>
    <li id="tdjrd5r"    class="phototext666">15張照片</li>
    <li>1月15日更新</li>
  </ul>
</div>
</body>
</html>

[ 可先修改部分代碼再運(yùn)行查看效果 ]

　　解決的辦法是對(duì)圖片的父元素li應(yīng)用浮動(dòng)，即可消除這樣的希奇現(xiàn)象，目前還不知道成因：

代碼調(diào)試框 [www.ghpqjb.com]

* {
margin:0;
padding:0;
}
.phototext{
color:#999999;
text-align:left;
float:left;
font-size:12px;
list-style:none;
}
.phototext img{
margin:0 5px;
float:left;
}
.phototext666{
color:#666666;
}
.phototext li{
float:left;
line-height:1.8em;
padding-left:5px;
}
.phototext li a, .phototext li a:hover{
color:#000000;
font-size:14px;
}
#soyi{
width:180px;
background-color:#FFCC00;
}

</style>
</head>
<body>
<div   class="t75lrj5"   id="soyi">
  <ul class="phototext">
    <li><img src="http://p1.mb5u.com/divcss/preview_s01.jpg" alt="" width="72" height="82" class="photorim" /></li>
    <li><a href="#">藍(lán)色經(jīng)典</li>
    <li id="vh7dvl5"    class="phototext666">15張照片</li>
    <li>1月15日更新</li>
  </ul>
</div>
</body>
</html>

[ 可先修改部分代碼再運(yùn)行查看效果 ]