首页 新闻 搜索 专区 学院

CSS的float问题请教

0
[已关闭问题]
以下代码在IE6下分别是一个菜单靠左边,一个靠右边,可是在FIREFOX下左边的菜单与左边缘有一段空白,帮忙改一下,谢谢。<br>&lt;style&gt;<br>/*页面头部*/<br>#header {background:url(logo.gif) no-repeat}<br><br>#menu {padding:0 0 0 0;}<br>#menuleft{float:left;list-style:none;margin:0px;}<br>#menuright{float:right;list-style:none;margin:0px;}<br>#menu ul li {float:left;margin:0 3px;display:block;line-height:20px}<br>.menuDiv {width:1px;height:20px;background:#999}<br><br>&lt;/style&gt;<br>&lt;div id="Header"&gt;<br>&nbsp;&nbsp; &nbsp;&lt;div id="menu"&gt;<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;ul id="menuleft"&gt;<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;li&gt;&lt;a href="#"&gt;.net&lt;/a&gt;&lt;/li&gt;<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;li class="menuDiv"&gt;&lt;/li&gt;<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;li&gt;&lt;a href="#"&gt;java&lt;/a&gt;&lt;/li&gt;<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;li class="menuDiv"&gt;&lt;/li&gt;<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;li&gt;&lt;a href="#"&gt;娱乐&lt;/a&gt;&lt;/li&gt;<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;li class="menuDiv"&gt;&lt;/li&gt;<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;li&gt;&lt;a href="#"&gt;灌水&lt;/a&gt;&lt;/li&gt;<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;/ul&gt;<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;ul id="menuright"&gt;<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;li&gt;&lt;a href="#"&gt;onlytiancai@msn.com&lt;/a&gt;&lt;/li&gt;<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;li class="menuDiv"&gt;&lt;/li&gt;<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;li&gt;&lt;a href="#"&gt;我的账户&lt;/a&gt;&lt;/li&gt;<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;li class="menuDiv"&gt;&lt;/li&gt;<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;li&gt;&lt;a href="#"&gt;退出&lt;/a&gt;&lt;/li&gt;<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;/ul&gt;<br>&nbsp;&nbsp; &nbsp;&lt;/div&gt;<br>&lt;/div&gt;
问题补充: @猫街仔 加上那个貌似也不行吧,你测试了吗?
蛙蛙王子的主页 蛙蛙王子 | 菜鸟二级 | 园豆:265
提问于:2007-12-22 09:57
< >
分享
其他回答(4)
0
这种问题我习惯在css最开头用 *{margin:0;padding:0} 解决 其他局部细节再进行设置
扑街仔 | 园豆:210 (菜鸟二级) | 2007-12-22 16:00
0
扑街仔的办法是可以的,把所有元素的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> <!--为了缩进,使用了中文空格,复制时记得去掉啊-->
丁学 | 园豆:18530 (专家六级) | 2007-12-23 11:31
0
为了解决兼容性问题,学会css hack是很必要的。可以看这个: http://www.cnblogs.com/JustinYoung/articles/891782.html 和这个 http://www.cnblogs.com/JustinYoung/archive/2007/09/14/892414.html
阿一(杨正祎) | 园豆:650 (小虾三级) | 2007-12-23 20:58
0
Css让我头疼很久了。后来用表格控制了!
pochonlee | 园豆:285 (菜鸟二级) | 2007-12-23 23:17
0
就是的Css在各浏览器中很让人难受的.不好处理.有同感 .
侯垒 | 园豆:3435 (老鸟四级) | 2008-01-31 14:41
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册