Hola todos :
Creo que es con
display: compact y
run-in.
Busca el atributo
display en
Google o el sitio del
W3C para más datos. Y no funciona en todos los navegadores.
[edit]
Iba a probar el
display que sugerí arriba, pero estoy seguro de que no va a andar.
Preparé un par de ejemplos más
Código:
<html>
<head>
<title></title>
<style>
body {font-size:100%;}
.separ1 {font-size:1em}
.separ1 dd .cerca{position:relative; left:0.2em; font-size:1.2em}
.separ1 dd .normal{position:relative; font-size:1.2em}
.separ1 dd .lejos{position:relative; left:-0.2em; font-size:1.2em}
.separ1 .contMultilinea{position:relative; margin-top:1.5em; }
.separ1 dd .multilinea{position:absolute; }
ol {font-size:1em; list-style-type:upper-alpha; }
.mayor{padding-left:0.8em; }
</style>
</head>
<body>
<ol>
<li>Letra normal.</li>
<li class="mayor">Letra lejos.
<br /> Otra linea.</li>
</ol>
<hr />
<dl class="separ1">
<dd><span class="cerca">•.</span> Punto cerca.</dd>
<dd><span class="normal">•.</span> Punto normal</dd>
<dd><span class="lejos">•.</span> Punto lejos</dd>
<dd class="contmultilinea"><span class="cerca">•.</span> <span class="multilinea">Punto cerca.
<br /> Otra linea de Punto cerca.</span></dd>
</dl>
</body>
</html>
Se puede 'hacer como' si se separara más la viñeta del texto (lo que puse es una versión del código de
JavierB ( 
) sin imagen, pero no acercarlos, así que terminé simulando una lista con
dl / dd y un caracter para conseguir el efecto.
Viñetas personalizables. [/edit]