span de ancho variable pero que siempre termine a la misma altura.

[daPhyre]

Buenas tardes compañeros, esta vez traigo un reto que creo será un poco difícil.

Tengo una lista con palabras de distintos tamaños, digamos algo así:

Código HTML:

<h2>Calificaciones.</h2>
<ul>
<li>Ana<span class="bar">-</span>9</li>
<li>Maria<span class="bar">-</span>7</li>
<li>Ana Maria<span class="bar">-</span>8</li>
</ul> 

La idea es mediante CSS, hacer que el span tenga color transparente y un fondo que muestre un patrón. Quiero que comience al terminar el nombre, pero terminen todos a la misma altura, para que los números queden alineados:

Calificaciones.
· Ana ---------------- 9
· Maria -------------- 7
· Ana Maria --------- 8

¿Alguien sabría como podría hacer este efecto?

[Tecna]

Buenas,

a ver que te parece mi propuesta, probado en firefox y opera

Código HTML:

<dl>
    <dt><em>nombre</em></dt>
    <dd>9</dd>
    <dt><em>nombre mucho pero que mucho mas largo</em></dt>
    <dd>10</dd>
</dl>
 

Código CSS:

dt {
    background: #f2ecf6 url(imagen_patron);
    line-height: 15px;
    margin-right: 30px;
}
 
dd {
    background: #f2ecf6;
    line-height: 15px;
    margin-top: -15px;
    text-align: right;
    width: 30px;
    float: right;
}
 
em {
    background: #f2ecf6;    /* sin color se ve el patron bajo el texto */
    padding-right: 10px;
}
 

[DragonX]

probá poniendole a tu span

span {width:medida en px o %;display:inline-block;}

Espero funcione, yo lo utilice para unos labes de un form y no tuve problemas

[daPhyre]

¡Muchísimas gracias a los dos!

Al final, he tenido que hacer un pequeño híbrido:

Código HTML:

<h2>Calificaciones.</h2>
<ul class="calif">
<li><span><em>Ana</em>-</span>9</li>
<li><span><em>Maria</em>-</span>7</li>
<li><span><em>Ana Maria</em>-</span>8</li>
</ul> 

Código:

.calif li span{color:transparent;background:url('bar.png') repeat-x;width:20em;display:inline-block}
.calif li span em{color:#000;background:#fff;font-style:normal}

Había intentado hacerlo con un .calif li span span, pero hacía unas cosas extrañas... Creo que debía haber puesto algo como "hijo de" o hacerlo con clases. Pero de cualquier forma, creo que semánticamente el nombre sería la parte enfatizada de la lista, aunque no lo muestre en itálica, por lo que no representaría un error

Muchísimas gracias

[DragonX]

Iniciado por daPhyre

¡Muchísimas gracias a los dos!