在列表中的css浮点问题

Question

我有一个问题整理出来，基本上它会是一个列表下面的图标和文本。图标大小保持不变，但文字不一致，如图片alt text 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：

<ul class="iconifier"> 
<li> 
    <a href="#" class="thumb" Title=""><img src="img/sprite.png" alt="Contacts" /></a> 
    <p><a href="#">English Depatment</a></p> 
</li> 
<li> 
    <a href="#" class="thumb" title="art"><img src="img/sprite.png" alt="Art" /></a> 
    <p><a href="#">Art Deptartment</a></p> 

</li> 
<li> 
    <a href="#" class="thumb" title="Travel and Tourism"><img src="img/sprite.png" alt="Travel and Tourism" /></a> 
    <p><a href="#">Mathematics</a></p> 
</li> 
    <li> 
    <a href="#" class="thumb" Title=""><img src="img/sprite.png" alt="Contacts" /></a> 
    <p><a href="#">Business Studies</a></p> 
</li> 
<li> 
    <a href="#" class="thumb" Title=""><img src="img/sprite.png" alt="Contacts" /></a> 
    <p><a href="#">English Depatment with a really long title that will hopefully fall</a></p> 
</li> 
<li> 
    <a href="#" class="thumb" title="art"><img src="img/sprite.png" alt="Art" /></a> 
    <p><a href="#">Art Deptartment</a></p> 

</li> 
<li> 
    <a href="#" class="thumb" title="Travel and Tourism"><img src="img/sprite.png" alt="Travel and Tourism" /></a> 
    <p><a href="#">Mathematics</a></p> 
</li> 
    <li> 
    <a href="#" class="thumb" Title=""><img src="img/sprite.png" alt="Contacts" /></a> 
    <p><a href="#">Business Studies</a></p> 
</li> 
<li> 
    <a href="#" class="thumb" Title=""><img src="img/sprite.png" alt="Contacts" /></a> 
    <p><a href="#">English Depatment</a></p> 
</li> 
<li> 
    <a href="#" class="thumb" title="art"><img src="img/sprite.png" alt="Art" /></a> 
    <p><a href="#">Art Deptartment</a></p> 

</li> 
</ul> 

Answer 1

您需要使用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

Answer 2

并不理想，但你可以使元件大小相同，这样，你永远不会有事情是一个问题漂浮在右边。

尝试增加给你的CSS：

ul.iconifier li 
{ 
    margin-bottom: -5000px; 
    padding-bottom: 5000px; 
} 

这个CSS应该使元素相同的高度。

干杯，肖恩

Answer 3

也许你可以使用http://plugins.jquery.com/project/gridLayout

Answer 4

有两种方法，第一种是使用css通过为修剪高度固定长度的修剪文本固定长度 第二种解决方案是使用服务器端开发代码通过向第一个LI添加清晰样式该行（注意：这个解决方案是为了修复号码。在线的块）