我在解决这个问题时遇到了问题,基本上它将是一个带有图标和文字的列表。图标大小保持不变,但文本没有,如图所示
.
问题是当<li>
有很多文本时,其余部分浮动到它的右侧。我该如何解决这个问题。
我的代码如下:
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>
对于现代浏览器,您需要使用display: inline-block;
而不是float来让它们向下推动它们下方的行。对于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
有两种方法,第一种方法是使用css,通过修剪高度为修剪高度修剪文本固定长度,第二种解决方案是使用服务器端开发代码,通过向线上的第一个LI添加清晰样式(注意:这个解决方案是为了修复线上的块数)
不理想,但你可以使元素大小相同,这样你就不会遇到向右浮动的问题。
尝试将此添加到您的CSS:
ul.iconifier li
{
margin-bottom: -5000px;
padding-bottom: 5000px;
}
CSS应该使元素具有相同的高度。
干杯,肖恩