css - 列表元素符号不会在 Firefox 中位于外部

Question

我正在构建的网页有一个右对齐的无序列表导航菜单，我希望元素符号在菜单左侧相互对齐。通过将列表放入其自己的 DIV 中，我能够在 Chrome 和 IE 中完成此操作；元素符号显示在 div 之外，因此我可以通过更改 DIV 宽度来控制它们与列表的距离。然而，在 Firefox 中，元素符号显示在 DIV 中，我似乎没有办法控制它们。

看这里的区别: http://s106.photobucket.com/user/El_Ornitorrinco/media/fftrouble.png.html

有什么差异？是否有一个简单的解决方案，或者我需要一个完全不同的方法？感谢您的宝贵时间。

瑞奇

Answer 1

习惯于此代码

像这样定义a tag display:block; 和text-align:right;

<ul>
    <li><a href="#">Milk</a></li>
    <li><a href="#">Eggs</a></li>
    <li><a href="#">Cheese</a></li>
    <li><a href="#">Vegetables</a></li>
    <li><a href="#">Fruit</a></li>
 </ul> 

CSS

ul li, ul{
    list-style:square;
}
ul{
    width:400px;

}
li a{display:block;text-align:right;}

Live Demo