当前位置: 动力学知识库 > 问答 > 编程问答 >

css - List bullets will not position outside in Firefox

问题描述:

My webpage I'm building has a right aligned unordered list nav menu, and I want the bullets to align with one another to the left of the menu. I was able to accomplish this in Chrome and IE by putting the list inside its own DIV; the bullets are displayed outside the div,so I can control their distance from the list by changing the DIV width. In Firefox, however, the bullets are displayed inside the DIV, and I do not appear to have a way to control them.

See the difference here:

http://s106.photobucket.com/user/El_Ornitorrinco/media/fftrouble.png.html

What's with the discrepancy? Is there a simple solution, or do I need a completely different approach? Thanks for your time.

Ricky

网友答案:

Used to this Code

Define you a tag display:block; and text-align:right; as like this

<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

网友答案:

Is this what you are looking for?

 <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 goes here

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;
}

If not then please create fiddle for it.

分享给朋友:
您可能感兴趣的文章:
随机阅读: