[已解决问题] CSS的float问题请教
提问时间: 2007-12-22 09:57
浏览:927 次
以下代码在IE6下分别是一个菜单靠左边，一个靠右边，可是在FIREFOX下左边的菜单与左边缘有一段空白，帮忙改一下，谢谢。
<style>
/*页面头部*/
#header {background:url(logo.gif) no-repeat}

#menu {padding:0 0 0 0;}
#menuleft{float:left;list-style:none;margin:0px;}
#menuright{float:right;list-style:none;margin:0px;}
#menu ul li {float:left;margin:0 3px;display:block;line-height:20px}
.menuDiv {width:1px;height:20px;background:#999}

</style>
<div id="Header">
    <div id="menu">
        <ul id="menuleft">
            <li><a href="#">.net</a></li>
            <li class="menuDiv"></li>
            <li><a href="#">java</a></li>
            <li class="menuDiv"></li>
            <li><a href="#">娱乐</a></li>
            <li class="menuDiv"></li>
            <li><a href="#">灌水</a></li>
        </ul>
        <ul id="menuright">
            <li><a href="#">onlytiancai@msn.com</a></li>
            <li class="menuDiv"></li>
            <li><a href="#">我的账户</a></li>
            <li class="menuDiv"></li>
            <li><a href="#">退出</a></li>
        </ul>
    </div>
</div>
提问者：蛙蛙池塘 - 菜鸟二级

问题补充：@猫街仔
加上那个貌似也不行吧，你测试了吗？

所有回答(5)
这种问题我习惯在css最开头用
*{margin:0;padding:0}
解决
其他局部细节再进行设置
7个月前   回答者：扑街仔 - 菜鸟二级
扑街仔的办法是可以的，把所有元素的margin/padding都定义为0可以解决，如果感觉有问题，可以试试定义body和ul的margin/padding：
body{margin:0;padding:0;}
ul{margin:0;padding:0;}
body的那个定义影响所有浏览器，浏览器默认会给四周留一些空白，你的那个在FF里左边有空白主要是因为<ul id="menuleft">的padding属性默认不是0。
另外，#menu {padding:0 0 0 0;}为缩写为#menu{padding:0;}
还有那个竖线分隔，你那个实在是一个很不好看的解决办法，下面这个好一些吧：
<style>
*{padding:0;margin:0;}
#header {background:url(logo.gif) no-repeat;}
#menuleft{float:left;}
#menuright{float:right;}
#menu li{list-style-type:none;border-left:1px solid #999;float:left;padding:0 6px;}
#menu .first{border:none;}

</style>
<div id="Header">
　　<div id="menu">
　　　　<ul id="menuleft">
　　　　　　<li class="first"><a href="#">.net</a></li>
　　　　　　<li><a href="#">java</a></li>
　　　　　　<li><a href="#">娱乐</a></li>
　　　　　　<li><a href="#">灌水</a></li>
　　　　</ul>
　　　　<ul id="menuright">
　　　　　　<li class="first"><a href="#">onlytiancai@msn.com</a></li>
　　　　　　<li><a href="#">我的账户</a></li>
　　　　　　<li><a href="#">退出</a></li>
　　　　</ul>
　　</div>
</div>
<!--为了缩进，使用了中文空格，复制时记得去掉啊-->
7个月前   回答者：丁学 - 大侠五级
为了解决兼容性问题，学会css hack是很必要的。可以看这个：
http://www.cnblogs.com/JustinYoung/articles/891782.html
和这个
http://www.cnblogs.com/JustinYoung/archive/2007/09/14/892414.html
7个月前   回答者：杨正祎 - 小虾三级
Css让我头疼很久了。后来用表格控制了！
7个月前   回答者：烟头上的探戈 - 菜鸟二级
就是的Css在各浏览器中很让人难受的.不好处理.有同感 .
5个月前   回答者：侯垒 - 小虾三级
评论
7个月前   丁学 :
本来可以不使用.first的，FF支持firstchild，但IE不支持
另外还有一个办法也不使用.first，其它定义不变，加一条：
#menu ul{margin:-1px;overflow:hidden;}
可惜这个对你也不适用，因为flost:right;的ul不支持这个
   您需要登录以后才能回答！
我的问题    我要提问

更多来自 蛙蛙池塘 的提问

快到期问题

> 问题排行榜

有不合适内容，建议去除