HolaHola! Gracias por sus respuestas. Al final lo resolvi de otra forma... (me acorde de que una vez leí un articulo en a-list-appart que hablaba sobre cuando usar <LI> con "display: inline;" y cuando usarlas con "float: left;" ... Lo explico super por arriba...
Si vas a hacer solo una tira HORIZONTAL, usa "float: left;", si vas a quere varias lineas / columnas, "display: inline;"
Aquí les dejo un codigo de lo que quería hacer y logré (metan una imagen de 30x30 :] )
Código HTML:
<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="description" content="Back End" />
<meta name="author" content="Eduardo G. Rajo" />
<meta name="keywords" content="" />
<meta name="copyright" content="2007 - EGR" />
<title>Back End v0.1</title>
<link rel="shortcut icon" href="" />
<link rel="stylesheet" type="text/css" href="../css/main2.css" />
<!-- <script src="../js/.js" type="text/javascript" language="javascript1.2"></script> -->
<style type="text/css">
UL {
list-style-type: none;
margin: 0;
padding: 0;
}
UL LI {
margin: 0;
padding: 0;
height: 40px;
background-color: gray;
border: 1px black solid;
float: left;
line-height: 40px;
overflow: hidden;
}
UL LI IMG {
margin-top: 5px;
}
</style>
</head>
<body>
<ul>
<li><b>Campo 1</b></li>
<li><i>Campo 2</i></li>
<li><img src="image4ee.jpg" width="30" height="30" alt="" /></li>
<li><span>Texto texto texto texto texto</span></li>
<li><b>Campo 3</b></li>
<li><i>Campo 4</i></li>
</ul>
<br style="clear: both;" />
</body>
</html> Un saludo grande y gracias! :)