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

Answer 2

这是你在找什么？

 <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
{
list-style-type: none;
padding: 0;
margin: 0;
text-align: right;
}

li
{
background-image: url(arrow.gif);
background-repeat: no-repeat;
background-position: 100% .4em;
padding-right: .6em;
}

如果没有，请为它制作小提琴。

列表项目符号不会位于Firefox外部

2 个答案: