CODEWITHSUNDEEP
htmlcss
davey
davey

Reputation: 1564

Float image to right in an anchor in a list

Trying to get my arrow image to stick to the right of the anchor

<ul>
   <li><a class="linkchild" href="#"><img class = "arrow" src="Images/arrow.png" alt="&#9658;"> 3.1 jQuery</a> 
    <ul>
        <li><a class="linkchild" href="#">3.1.1 Download</a></li>
        <li><a class="linkchild" href="#">3.1.2 Tutorial</a></li>
    </ul>
   </li>
   <li><a  class="linkchild" href="#">3.2 Mootools</a></li>
   <li><a class="linkchild" href ="#">3.3 Prototype</a></li>
</ul>

CSS:

img .arrow 
{
    float: right;
}

Upvotes: 0

Views: 592

Answers (3)

biziclop
biziclop

Reputation: 14596

Assuming you want this layout:

3.1 jQuery [IMG]
3.1.1 Tutorial
....

You could float:left the anchor tags to shrink-wrap to their content, including the float:right-ed image:

http://jsfiddle.net/4REuw/

img.arrow {
    float: right;
}

a {
    border: 1px solid red;
    float: left;
    clear: left;
}
​

Upvotes: 0

Christoph
Christoph

Reputation: 51181

img .arrow

-> a child of an image tag with the class arrow - your current css

img.arrow

-> an image with the class arrow - probably what you really wanted to write

Upvotes: 1

Rohit Azad Malik
Rohit Azad Malik

Reputation: 32162

Hey now used as like this 

img.arrow 
{
    float: right;
}

not this 

img .arrow 
{
    float: right;
}

Because you used 

<img src="" class="arrow">

Upvotes: 0

Related Questions