Question

I have image (orange flower) , I want to move it to right side in the li.

The image embedded in the <a> tag and I write float:right; but it is not working.

I donwt know why, I need help, many thanks.

Demo jsFiddle

    <ul id="menu">
                    <li><a href="index.html">home</a></li>
                    <li><a href="learnmore.html">פרטים נוספים</a></li>
                    <li><a href="services.html">learnmore</a></li>
                    <li><a href="about_us.html">about_us</a></li>
                    <li><a href="prices.html">prices</a></li>
                    <li><a href="location.html">location</a></li>
            </ul>​
* { 
    margin:0; padding:0;
    border:0; diraction:rtl;
}
 body{
     text-align:right;
     font-family:Arial;
     font-size: 20px;
     border:1px solid red;
     font:13px Arial, Helvetica, sans-serif; color:#a7a7a7;
     line-height:20px
}
#menu { width:100%;
        border: 5px solid green;
        padding:18px 30px 0 0; border-bottom:1px solid #e2e2e2;}
#menu li { 
    border: 5px solid brown;float:right;padding-right:30px;}
#menu li a{ 

    right:0;
 text-transform:uppercase; text-decoration:none; 
 color:#2c2c25; font-size:18px; line-height:20px;
    float:right; right:0;
     background:url(http://t0.gstatic.com/images?q=tbn:ANd9GcRP4bAv-ruMbgWa8rTLZhWOITQk6aGOI8L_YMrmsRbacuIR502w) 
    7px 1px no-repeat;

}​

Answer 1

Use background-position: right; in li.

#menu li {
border: 5px solid brown;float:right;padding-right:30px;
background:url(http://t0.gstatic.com/images?q=tbn:ANd9GcRP4bAv-ruMbgWa8rTLZhWOITQk6aGOI8L_YMrmsRbacuIR502w)
7px 1px no-repeat;
background-position: right;
   }

Demo jsfiddle