Obtener un elemento span llene el espacio en un div

Solución:

Si reordena su HTML, puede obtener una solución simple:

<div class="container">
  <span class="left">Title</span>
  <span class="right">value</span>
  <span class="center">&nbsp;</span>
</div>

Coloque los dos elementos flotantes delante del .center elemento. los .center El elemento estará en un flujo de contenido regular y se ajustará al contenido izquierdo y derecho.

los CSS:

.center {
    display: block;
    border-bottom: 1px dotted blue;
    overflow: auto;
    position: relative;
    top: -4px;
}

.right {
    float: right;
    margin-left: 10px;
}

.left {
    float: left;
    margin-right: 10px;
}

.container {
    width: 200px;
    border: 1px dotted red;
    padding: 5px;
}

Cuando flota un elemento, el tipo de visualización se calcula para bloquear, por lo que no es necesario declararlo.

También por .center, si agrega overflow: auto, restringe el bloque para que no se extienda más allá de los bordes de los elementos flotantes. Como resultado, su borde inferior no subraya el título y el texto del valor.

Finalmente, puede agregar position: relative y mueve el .center hacia arriba unos píxeles para alinear el borde más cerca de la línea de base del texto.

Violín: http://jsfiddle.net/audetwebdesign/DPFYD/

para esto necesitas cambiar la estructura html de esta manera

html

<div class="container">
  <span class="left">Title</span>
  <span class="right">value</span>
  <span class="center">&nbsp;</span>
</div>

y aquí está el css para .center span

.center {
    text-align: center;
    border-bottom: 1px dotted blue;
    display:block;
}

jsFiddle Archivo

---

---

Utiliza Nuestro Buscador