CODEWITHSUNDEEP
csscss-float
Greg H
Greg H

Reputation: 465

Floating image to right in HTML lists causes alignment issues

For simplicity, I'm using inline styles so you can see what's going on. I've used a red border for list elements and a black border for the images? Why aren't the images aligned properly? This has been driving me nuts.

See screenshot:

enter image description here

See code:

<ul>
<li style="border: 1px solid red">Result <span style="display: block; float: right; border: 1px solid #000"><img src="../../resources/images/delete.png" /></span></li>
<li style="border: 1px solid red">Result <span style="display: block; float: right; border: 1px solid #000"><img src="../../resources/images/delete.png" /></span></li>
<li style="border: 1px solid red">Result <span style="display: block; float: right; border: 1px solid #000"><img src="../../resources/images/delete.png" /></span></li>
</ul>

JS Fiddle

http://jsfiddle.net/jMzub/

Upvotes: 2

Views: 795

Answers (2)

user1633525
user1633525

Reputation:

You need to include height to li

li{height: 30px;}

Upvotes: 0

Mr. Alien
Mr. Alien

Reputation: 157284

You need to clear the floats

<ul>
<li style="border: 1px solid red">Result 
<span style="display: block; float: right; border: 1px solid #000">
   <img src="../../resources/images/delete.png" />
</span>
<div style="clear: both;"></div>
</li>
<!--Same for other li-->
</ul>

But this is a dirty way, I would've used background-image and background-position for <li> element instead(Unless and until you'll be using image as a link or for some click purpose)

Upvotes: 4

Related Questions