列表中的css float问题

我在解决这个问题时遇到了问题,基本上它将是一个带有图标和文字的列表.图标大小保持不变,但文字并不像图片中所示替代文字http://i34.tinypic.com/33op84m.jpg(http://i34.tinypic.com/33op84m.jpg).问题是,当李有分配文本时,其余的文件浮动到它的右边.我该如何解决这个问题.

Mycodes如下:

ul.iconifier {
width: 100%;
list-style: none;
margin: 0 auto; padding: 0;
}
ul.iconifier li {
float: left;
margin: 10px; padding: 0;
text-align: center;
border: 1px solid #ccc;
width:8em;
height:200px;
-moz-border-radius: 3px; /*--CSS3 Rounded Corners--*/
-khtml-border-radius: 3px; /*--CSS3 Rounded Corners--*/
-webkit-border-radius: 3px; /*--CSS3 Rounded Corners--*/
display: block; /*--IE6 Fix--*/
height:101%;
}

ul.iconifier li a.thumb{ 
width: 128px;
height: 128px;
overflow: hidden;
display: block;
cursor: pointer;

}
ul.iconifier li a.thumb:hover {

}
ul.iconifier li p {
font: normal 0.75em Verdana, Arial, Helvetica, sans-serif;
margin: 0; padding: 10px 5px;
background: #f0f0f0;
border-top: 1px solid #fff; /*--Subtle bevel effect--*/
text-align:center;
width:118px;

}

ul.iconifier li a {text-decoration: none; color: #777; display: block;}

HTML:

    
    
English Depatment


    
    
Art Deptartment



    
    
Mathematics

    

    
    
Business Studies


    
    
English Depatment with a really long title that will hopefully fall


    
    
Art Deptartment



    
    
Mathematics

    

    
    
Business Studies


    
    
English Depatment


    
    
Art Deptartment

小智.. 6

display: inline-block;对于现代浏览器,您需要使用而不是浮动来让它们向下推动它们下方的行.适用于IE6和IE7使用display: inline.

ul.iconifier li用以下代码替换:

        ul.iconifier li
    {
        margin: 10px;
        padding: 0;
        text-align: center;
        border: 1px solid #ccc;
        width: 8em;
        -moz-border-radius: 3px; /*--CSS3 Rounded Corners--*/
        -khtml-border-radius: 3px; /*--CSS3 Rounded Corners--*/
        -webkit-border-radius: 3px; /*--CSS3 Rounded Corners--*/
        display: -moz-inline-box; /* mozilla only */
        display: inline-block; /* for browsers that support display:inline-block*/
        vertical-align: top;
    }

然后添加此代码以使IE6和IE7工作:

   /* Show only to IE7 */
    *:first-child + html ul.iconifier li
    {
        display: inline;
    }
    /* Show only to IE6 */
    * html ul.iconifier li
    {
        display: inline;
    }

我从这些网站学到了这种方法:
http://gtwebdev.com/workshop/layout/inline-block-gallery.php
http://www.css-lab.com/demos/image-display/inline-block-caption html的

display: inline-block;对于现代浏览器,您需要使用而不是浮动来让它们向下推动它们下方的行.适用于IE6和IE7使用display: inline.

ul.iconifier li用以下代码替换:

        ul.iconifier li
    {
        margin: 10px;
        padding: 0;
        text-align: center;
        border: 1px solid #ccc;
        width: 8em;
        -moz-border-radius: 3px; /*--CSS3 Rounded Corners--*/
        -khtml-border-radius: 3px; /*--CSS3 Rounded Corners--*/
        -webkit-border-radius: 3px; /*--CSS3 Rounded Corners--*/
        display: -moz-inline-box; /* mozilla only */
        display: inline-block; /* for browsers that support display:inline-block*/
        vertical-align: top;
    }

然后添加此代码以使IE6和IE7工作:

   /* Show only to IE7 */
    *:first-child + html ul.iconifier li
    {
        display: inline;
    }
    /* Show only to IE6 */
    * html ul.iconifier li
    {
        display: inline;
    }

我从这些网站学到了这种方法:
http://gtwebdev.com/workshop/layout/inline-block-gallery.php
http://www.css-lab.com/demos/image-display/inline-block-caption html的