css <li>标签溢出的问题

html-css018

css <li>标签溢出的问题,第1张

这个问题的出现是因为第一行 两个 <li>高度不一致，左边第一个 比第二个高，导致 第三个 <li>往左浮动换行的时候被第一个<li>高于第二个<li>的部分卡住了，所以留了一个空白，你仔细看你截图的第一行 2个 <li>文字的位置，第二个文字要稍上一些。建议你给所有的<li>添加1像素可见边框 就可以明显看到问题了。为什么ie下有问题，火狐下没问题？因为你给所有的li都写死了高度，火狐下外部容器的高度不受内容高度的影响，设定多少就是多少，ie下如果内容高度高于外部容器高度，是会撑开的。

建议你把html结构代码也贴上来，这样好分析问题一些。

由于你文本长度超过span宽度，建议使用

span{ padding:0px 10px}

实际项目开发，一般不会在有文本显示的地方去自定义宽度，除非是左侧导航或者什么的。因为文本时不可控的东西。所以建议楼主可以考虑使用 padding属性值。把li撑开，达到居中的效果。

更改li的width其实原理是不会影响margin值的，可以大概chrome谷歌浏览器省查li元素的margin值，是不会随着width变化值会变化。

你觉得变小了只是视觉上的width吧容器撑开了