ul 列表中出现神秘的 margin
对我来说这真的很奇怪，我有这个菜单：
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div.menu{text-align:right;}
div.menu ul{
list-style:none;
display:inline;
}
div.menu li{
position:relative;
display:inline;
background:#434343;
padding:8px 12px;
line-height: 32px;
margin:0;
border-left:1px #000 solid;
}
</style>
</head>
<body>
<div class="menu">
<ul>
<li></li>
<li> </li>
<li></li>
<li>Hi</li>
<li>Hello </li>
<li></li>
</ul>
</div>
</body>
</html>
我使用最新的chrome和firefox 3.6进行测试
有6个li但只显示了5个，li内的空格导致它无法渲染 如果里面有文本会导致 4px 空间
“hi”之后有一个空格，“hello”不会
在 li 内添加锚点会导致相同的行为
<li><a href="#">Link</a></li>
之后有一个空格
<li><a href="#">Link</a> </li>
在不
添加 div.menu li a:after{内容:" ";} 代码中显然可以解决问题，但如果仔细观察，除了最后一个元素之外，元素会显得更宽，
有什么帮助吗？
谢谢
to me this is really weird, i have this menu:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div.menu{text-align:right;}
div.menu ul{
list-style:none;
display:inline;
}
div.menu li{
position:relative;
display:inline;
background:#434343;
padding:8px 12px;
line-height: 32px;
margin:0;
border-left:1px #000 solid;
}
</style>
</head>
<body>
<div class="menu">
<ul>
<li></li>
<li> </li>
<li></li>
<li>Hi</li>
<li>Hello </li>
<li></li>
</ul>
</div>
</body>
</html>
i'm using the latest chrome and firefox 3.6 for testing
there are 6 li but only 5 are shown, a space inside the li causes it not to be rendered
if there's a text inside it causes a 4px space
"hi" has a space after, "hello " doesn't
adding anchors inside the li causes the same behaviour
<li><a href="#">Link</a></li>
has a space after
<li><a href="#">Link</a> </li>
doesn't
adding
div.menu li a:after{content:" ";}
in the code would solve the problem apparently but if you look closely the elements will appear wider except the last one
any help?
thank you
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
对我来说看起来不错：
小提琴：http://jsfiddle.net/maniator/hgde9/show/
Chrome 关于：
更新：
添加：
到
div.menu li小提琴：http://jsfiddle.net/maniator/hgde9/1/显示/
Looks fine to me:
Fiddle: http://jsfiddle.net/maniator/hgde9/show/
Chrome About:
Update:
Add:
To
div.menu liFiddle: http://jsfiddle.net/maniator/hgde9/1/show/
问题出在
display:inline上。如果源中存在 wehitespace，则两个相邻的内联元素之间有一个空格。或者如果其中一个元素内有空格。空格会折叠，因此“Hello”中的空格与其后面的空格折叠并最终位于 li 内，而“Hi”中没有空格，只有后面的空格。The problem is with
display:inline. Two inline elements next to each other have a space between them if there is wehitespace in the source. Or if there is a space inside one of the elements. Whitespace collapses, so the space in "Hello " is folded with the space after it and ends up inside the li, while there is no whitespace in the "Hi", only after.html 中有空白，将其删除，间隙就会消失！就像尝试这个 html 一样
，一切都会被揭示！ （与 CSS 无关！）
there is white space in the html, remove that and the gap will go! as in try this html
and all will be revealed! (its nothing to do with CSS!)