CODEWITHSUNDEEP
javascriptjqueryhtml
ramesh kumar
ramesh kumar

Reputation: 1707

image in a list not being displayed correctly(as if in table), how to do that

I have code something like this : 

<ul>
   <li>some text <img src="path" style="height:15px;width:25px;" /></li>
   <li>some text <img src="path" style="height:15px;width:25px;" /></li>
   <li>some text <img src="path" style="height:15px;width:25px;" /></li>
</ul>

What i want is , the "some text" and img should come neatly, as if they are 2 cols in a table . Also, if text is small like "ab" , then the image should not change its position , i mean, shouldnt come near, it should be always at far distance like some 80px after "some text" . And,if text length is more than 80, img should lie after text only . Will provide more information if necessary .
Thanks

Upvotes: 0

Views: 70

Answers (2)

mangeohlin
mangeohlin

Reputation: 42

You can solve the problem by adding a couple of span tags inside the list items and some CSS as follows:

<style type="text/css">

li {
    clear: left;
}

li span {
    display:block;
    float: left;
    width: 140px;
}

li img {
    float: left;
}
​
</style>

<ul>
    <li><span>some text</span><img src="path" style="height:15px;width:25px;" /></li>
    <li><span>some text bla bla bla</span><img src="path" style="height:15px;width:25px;" /></li>
    <li><span>some text</span><img src="path" style="height:15px;width:25px;" /></li>
</ul>​

You can check out the result of this here: http://jsfiddle.net/magnusohlin/xhLmx/

Upvotes: 0

efirat
efirat

Reputation: 3867

<li><span style="min-width:80px; display: inline-block;">some text</span>
<img src="path" style="height:15px;width:25px; float:left;" /></li>

This will works...

Upvotes: 2

Related Questions