Question

对我来说，这真的很奇怪，我有这个菜单：

    <!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”之后有一个空格，“你好”不会

在li中添加锚点会导致相同的行为

   <li><a href="#">Link</a></li>

之后有一个空格

   <li><a href="#">Link</a> </li>

不

添加 div.menu li a：after {content：“”;} 在代码中显然会解决问题，但如果仔细观察，除了最后一个元素外，元素会显得更宽

任何帮助？

谢谢

Answer 1

    div.menu{text-align:right;}
    div.menu ul{
        float:right;
...
    }
    div.menu li{
        float:left;
...
    }

Answer 2

对我来说很好看：

looks fine ^_^

小提琴：http://jsfiddle.net/maniator/hgde9/show/

Chrome关于：

Google Chrome   18.0.1017.2 (Official Build 118867) dev-m
OS  Windows
WebKit  535.19 (@105663)
JavaScript  V8 3.8.7.1

更新

添加：

float: right;
height: 32px;

至div.menu li

小提琴：http://jsfiddle.net/maniator/hgde9/1/show/

Answer 3

问题在于display:inline。如果源中有wehitespace，则彼此相邻的两个内联元素之间会有一个空格。或者如果其中一个元素中有空格。空白崩溃，因此“Hello”中的空格被折叠后的空格并最终在li内部，而“Hi”中没有空格，只有在之后。

Answer 4

html中有空格，删除它，差距就会消失！就像在尝试这个HTML

<ul><li></li><li> </li><li></li><li>Hi</li><li>Hello </li><li></li></ul>

所有人都会被揭露！（它与CSS无关！）

神秘的边缘出现在ul列表中

4 个答案:

更新