Question

I’m having lots of problem aligning an image on CSS.
Here is the thing, I have a div called “toggle” inside this div I have a list ul – li on each li I have text and then 3 images, but I want to have the Images aligned some how the alignment of the images are relative to the text not to the left padding.

http://aluna.webdcg.com/visistat/

Answer 1

Maybe this is what you need. See code in action at: http://jsfiddle.net/67VWe/

CSS:

* { font-family: Tahoma; }
ul { width: 200px; margin: 20px; border: 1px solid #777; }
li { padding: 2px; border-bottom: 1px dotted #777; }
li label { width: 120px; float: left; }
​

HTML:

<div id="toggle">
    <ul>
        <li><label>Text 1</label> <img src="http://admin.visistat.com/sales/img/icon-pulse-dot-red.png" width="22" height="22" /></li>
        <li><label>Text 1234</label> <img src="http://admin.visistat.com/sales/img/icon-pulse-dot-red.png" width="22" height="22" /></li>
        <li><label>Text 1234567</label> <img src="http://admin.visistat.com/sales/img/icon-pulse-dot-red.png" width="22" height="22" /></li>
    </ul>
</div>

—

The label tag, width, and float values did the trick.