87,991
社区成员
发帖
与我相关
我的任务
分享css中遇到的问题
<html>
<style type="text/css">
li{
width: 20px;
float: left;
margin-right: 30px;
margin-bottom: 12px;
}
img{
position: absolute;
}
</style>
<body>
<ul>
<li><a><img src="facebook.png"></a></li>
<li><a><img src="facebook1.png"></a></li>
<li><a>3</a></li>
</body>
</html>如上代码，如果我吧li的margin-bottom: 12px;，去掉的话，那么着2张图片就会挤在一起，但是加上的话就不会。这是为什么？margin-bottom: 12px;不是距ul的距离吗？为什么会影响了Li的布局？
...全文
请发表友善的回复…
发表回复
iMouseWu 2013-10-03
- 打赏
- 举报
没有，是源码[/quote]后面测试发现这是一个浏览器兼容性的问题！用<ul><li></li></ul>中在谷歌浏览器中Li设为float的时候，默认是给这个Li加上list-style-type：none的.但是在ff浏览器却是没有省略的！现在的问题就是如果，加上了list-style-type：none，然后还加了float:left的话，如果没有margin-buttom这句的话就会图片叠在一起！加上这句话就会好的！所以上述代码如果在谷歌浏览器里面的话（吧margin-buttom这个去掉）那么就会出现叠在一起的现象，如果是ff浏览器的话需要加上list-style-type：none，然后把margin-buttom这个去掉，也会这样子！具体margin-buttom这个属性在这里的作用是什么就不知道是什么了！求解答0.0
weiba112027 2013-10-03
- 打赏
- 举报
没有，是源码
iMouseWu 2013-10-02
- 打赏
- 举报
margin-bottom: 12px;这个属性去掉了吗？
iMouseWu 2013-10-02
- 打赏
- 举报
margin-bottom: 12px;这个属性去掉了吗？
iMouseWu 2013-10-02
- 打赏
- 举报
会有一个hover事件，来覆盖掉这个img
KK3K2005 2013-10-01
- 打赏
- 举报
img 为什么是 absolute
drq6772 2013-10-01
- 打赏
- 举报
position:absolute 去掉
似梦飞花 2013-10-01
- 打赏
- 举报
没有挤在一起啊
weiba112027 2013-10-01
- 打赏
- 举报
你的图片是多大的呢？我这边图片没有记载一起。
