css 设置横向列表float:left 出现空隙

html-css010

css 设置横向列表float:left 出现空隙,第1张

你好，你的意思是不是最后一个li 换行了。如果是的话，那是因为你的 li宽度写的不够，你改大点就可以了。目前是100px ，你可以改大点。

另外，你的代码可以优化很多，写CSS的目的就是为了节约代码所以加油噢。

比如。#top-nav 下面如果写ul li 的时候， 代码中就不要引用，class了。 你只要在css 中用连写就可以了。#top-nav ul {....} #top-nav ul li {,.....} 这样写，你页面中ul 就不要再调用class了。

再比如：写页面的时候先要对所有需要运用的元素进行格式化。div,ul,li,ol,li,p ｛margin:0padding:0} 这样写好了以后，下面CSS文件中的所有元素就不需要再写这代码了。

给你做过很多测试了，

各种hack都用了实在没办法，

只要添加浮动就会隐藏掉li项目符号，

建议你用图片背景来实现吧，

不要浪费时间去测试了，

相信我的能力，

看我名字还有个徽章呢呵呵:)

一直我们做WEB开发都是用图片取代你这种方式来实现的，

目的是兼容，

以前一直没做过测试，

这回试了，还真不行。、

给你一个css修正，

.mylist li {

float: left

margin-left: 10px

}

这里，你应该加多一句

display:inline

这个是解决IE6下边距加倍的hack；

不信的话你把margin-left:10px的值设大一点，你就能看到list的左边的边距与其他浏览器的差异了

左边那两个可以float:left，右边那三个就float:right嘛。每个div设置position:relative相对定位，再设置left、top、right来稍微调整一下。