Alinear un texto a derecha y otro a izquierda dentro de <li>

[mrc2407]

Buenas.

Quisiera hacer algo tipo lo siguiente:

Código:

1. Pepe Ramírez               15 puntos
2. José Fernández             10 puntos
3. Pepe Juan                   5 puntos

Es decir, el nombre alineado a la izquierda y los puntos a la derecha. Para hacerlo, tengo esto:

Código HTML:

<div class="sidebar_box">
<ol class="lista-clasificacion">
		<li><span class="usuario-classificacion">Pepe Ramírez</span> <span class="puntuacion-clasificacion">15 puntos</span></li>
		<li><span class="usuario-classificacion">José Martínez</span> <span class="puntuacion-clasificacion">5 puntos</span></li>
		<li><span class="usuario-classificacion">Pepe Juan</span> <span class="puntuacion-clssificacion">1 punto</span></li>
</ol></div> 

Y esto en CSS:

Código:

.sidebar_box {
background:#111;
padding:10px 10px 10px 10px;
margin-bottom:20px;
}
.lista-clasificacion{
	margin:0px;
	padding: 0px;
	margin-top:.5em;
}

.lista-clasificacion li{
	border-top:1px dotted #444444;
	padding: 0.5em;
}

span.usuario-clasificacion{display:block;float:left;}
span.puntuacion-clasificacion{display:block;float:right;}

Pero me sale horroroso. He probado con text-align, también poniendo positin:absolute y right:0px, pero tampoco.

Alguna idea, por favor?

EDIT: Acabo de comprobar que si los span los pongo con display:block y text-align (left i right para cada uno) aparece lo que quiero, pero los puntos aparecen en la línea inferior.