View Full Version : put 'img' inside 'ul'

07-10-2011, 07:48 PM
is it a good practice to put 'img' tag inside 'ul'?
e.g. have certain pictures somewhere inside the list

it seems that if an img or div is put inside the 'ul', the behaviour is quite unexpected~~~

if it is not a good practice, how to deal with this situation?

thx in advance.

07-10-2011, 08:00 PM
If you put the <img> inside a <li> then it's valid and should not have any unexpected results.

<li><img src="" /></li>

Try posting your full script and tell us the unexpected results you are seeing.

I wouldn't consider it "good practice" to put img inside a ul. A ul is a list! Inless your listing <img>s then there isnt a reason to use it.


07-11-2011, 09:52 AM
it seems merely inserting an img into the list doesn't incur any side effect. I find my problem results from a containing div in the list:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
ul {
margin: 0px;
padding: 0px;
list-style-type: none;
background-color: yellow;
width: 100px;
ul li {
background-color: #9F0;
margin: 5px 10px;
padding: 0px;
.wrapper {
background-color: #FC6;

<div class="wrapper">
<img src="" width="100" height="10" />

the last 'li' has a 5px margin-bottom but the bottom side of the 'wrapper' div overlaps the bottom of that 'li'. Also the first 'li' has a 5px margin-top, which doesn't show up ~~~

Further, it seems that
</ul> also ignore the top margin of the first list item and the bottom margin of the last. Why is it like that ~~~

07-11-2011, 12:21 PM
Your code is invalid.

You cannot use any element inside <ul> or <ol> elements other than <li>.

Only <li> can be the child element of <ul> or <ol>.

If you want to use in list, you should use following code:

<li><img src="" width="100" height="10" /></li>

Cheers :)

07-11-2011, 03:07 PM
i may ask my another question in another thread

07-11-2011, 03:47 PM
U r welcome :).....

let me know through PM whenever you ll ask another ques...

take care :)