gpt4 book ai didi

css - IE7 中 block 元素的自动边距

转载 作者:太空宇宙 更新时间:2023-11-03 19:20:15 28 4
gpt4 key购买 nike

我一直在尝试创建左浮动的 LI 元素和其中的图像(作为“ block ”)。除了 IE 7(和 6)之外,代码在所有浏览器中都可以正常工作,在这些浏览器中,LI 是垂直组织的,而不是水平组织的。为了使代码在 IE7 中正常工作,我应该更改什么?(您也可以在 http://jsbin.com/ilexa/edit 找到代码)。

代码:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.2.0/build/cssreset/reset-min.css">

<style>
ul {
width:700px;
}
li {
float:left;
margin:10px;
}
li img {
display:block;
margin: 0 auto ;
width:50px;
height:50px;
}
</style>
</head>
<body>
<ul>
<li><img src="http://dummyimage.com/50x50/000/fff" /></li>
<li><img src="http://dummyimage.com/50x50/000/fff" /></li>
<li><img src="http://dummyimage.com/50x50/000/fff" /></li>
<li><img src="http://dummyimage.com/50x50/000/fff" /></li>
<li><img src="http://dummyimage.com/50x50/000/fff" /></li>
<li><img src="http://dummyimage.com/50x50/000/fff" /></li>
</ul>
</body>
</html>

最佳答案

是否需要 <img>作为 block ? <li> 不能完全处理间距吗? ?另一种方法是也声明 <img>作为float: left - 甚至可能是 inline-block (参见 Block-level elements within display: inline-block)。

关于css - IE7 中 block 元素的自动边距,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4357821/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com