Home/ Questions/Q 7890869
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-03T06:28:09+00:00

I’m creating a list with delete image (button) on right side. When I put

  • 0

I’m creating a list with delete image (button) on right side. When I put the a and span element into li element, and give the float:right style to the span element, it works in Chrome but not IE. IE renders delete image not same line. And on Chrome, delete image on second li not rendering top right of the li.

I need browser independent, just a item list with delete button on right side. Any other solution without ul,li,span elements appreciated. (Button or image must be separate element because I will add click handler to it.)

PS: Fiddle link here

<html>
<head>
<style type="text/css">
ul{
width: 200px;
}

li{
   border-style:solid;
   border-color:#98bf21; 
}

li span{
background-image:url('http://www.kodlab.com/Image/delete.png');
    width: 16px;
    heigth: 16px;
    display: inline-block;
}


</style>
</head>
<ul>
    <li><a>Foo</a><span></span></li>
    <li><a>neque porro quisquam est qui dolorem ipsum</a><span></span></li>
</ul>​​
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The easiest way to make float:right do what you want is to move the delete button before the link in the markup:

    http://jsfiddle.net/RMEeF/5/

    <ul>
    <li><span></span><a>Foo</a></li>
    <li><span></span><a>neque porro quisquam est qui dolorem ipsum</a></li>
</ul>

    Another option is to use position:absolute on the delete button, and position:relative; on the container:

    http://jsfiddle.net/RMEeF/6/

    li{  
   position:relative;
}

li span{
    background-image:url('delete.png');
    width: 16px;
    height: 16px;
    position:absolute;
    top:2px;
    right:2px;
}

    Adjust positioning as needed. This approach may interfere with the visibility of the other content if it overlaps, but the advantage is that it doesn’t matter where in the markup you put the delete button.

    And you should probably be using forms for the delete buttons instead of spans.

    • 0