El espacio entre divisiones de bloque en línea no puede resolver eliminando el espacio en blanco

Sé que esta pregunta ha sido solicitada en SO antes, y la respuesta generalmente es eliminar cualquier espacio entre el marcado. En este caso, no puedo, ya que estoy imprimiendo programáticamente divs:

{{#each products}} {{> product}} {{/each}}

No le aburriré con los detalles de la plantilla del product , pero basta con decir que el motor de plantillas va a volcar los divs con espacio o nueva línea entre cada uno.

Lo que trato de hacer es cerrar esas brechas para obtener los seis divs en una fila (sin envoltorio). Además, los divs deben estar centrados dentro de la página (o su contenedor). Entonces, ya sea que tenga dos divs o seis, siempre deben estar centrados.

Aquí hay un JSFiddle que muestra los divs con mal espaciado:

http://jsfiddle.net/6opf8ybs/

¿Hay alguna forma de arreglar esto en CSS? Escuché que el truco del font-size: 0 no es ideal.

HTML:

  
b
d
b
d
d
d

CSS:

 .row-center { text-align: center; } .col-center { display: inline-block; border: 1px solid blue; text-align: left; float: none; } 

Podría usar un margen negativo en los artículos de inline-block en inline-block . Echa un vistazo a este jsFiddle

 .col-center { display: inline-block; border: 1px solid blue; text-align: left; margin: 0 -2px; padding: 10px; } 

Editar: ¿Qué pasa si cambiaste la pantalla del contenedor a flexión?

 .container { display: flex; align-content: center; justify-content: center; } 

http://jsfiddle.net/toodgqmm/2

Simplemente puede usar el valor de margin negativo como este a continuación:

 .col-center { display: inline-block; border: 1px solid blue; text-align: left; float: none; margin-left:-2.5px; margin-right:-2.5px; } 

Deja que Bootstrap haga su trabajo. Recomiendo comprobar cuántos elementos hay en una línea, desde dentro de su código (JS). Si dos elementos codifican como

 
b
d

si tiene cuatro elementos codifican como

 
b
d
b
d

etc …. 1 * 12 = 2 * 6 = 3 * 4 = 12 … deja que Bootstrap trabaje para ti. Los 5 elementos obvios en una sola línea serán un problema … (Asumo un máximo de 6 elementos …)

Uh-oh … ¿este es un listado generado angular? ¿Has mirado la etiqueta stackoverflow angular-ui-bootstrap ?

Recientemente encontré una solución a este problema:

 .row-center { display: table; word-spacing: -2em; width: 100%; } .col-center { display: inline-block; word-spacing: normal; *display: inline; *zoom: 1; } .col-center:before { content: ''; display: block; } 

Hice un artículo sobre él y cómo funciona: http://cahnory.tumblr.com/post/127631188627/effectively-remove-whitespaces-between