los elementos de la lista de bloques en línea se desordenan cuando uno está vacío

Quería poner alguna imagen en el primer elemento de la lista, pero parece que se estropea cuando no hay contenido. Probé varios métodos en jsfiddle (varias opciones de visualización y posición) pero ninguno de ellos funciona para alinear la línea “al” cuando la primera está vacía. Parece ser un problema con la propiedad en línea. ¿Tiene uno que tenía un problema tan hilarante y tiene una solución clara?

PS: ul li {display: block; float: left;} no funciona

ul { font-size: 0px; display: inline-block; height: 40px; width: 100%; background-color: black; } ul li { font-size: 14px; display: inline-block; width: 50px; background-color: red; border: solid black 1px; height: 38px; margin: 0px; padding: 0px; text-align: center; } div { heght: 1.5em; margin: 0px; padding: 0px; } 
 
  • 1
  • 2
  • 3
  • 4

necesita restablecer la propiedad de alineación vertical-align:top; (el valor predeterminado es la línea de base y depende del contenido que establece la altura de la línea)

https://www.w3.org/TR/CSS2/visudet.html#propdef-vertical-align

ejemplos para jugar

 ul { font-size: 0px; display: inline-block; height: 40px; width: 100%; background-color: black; } ul li { font-size: 14px; display: inline-block; vertical-align:top; width: 50px; background-color: red; border: solid black 1px; height: 38px; margin: 0px; padding: 0px; text-align: center; } div { heght: 1.5em; margin: 0px; padding: 0px; } 
 
  • 1
  • 2
  • 3
  • 4

Añadir vertical-align: top; a sus elementos li .

overflow: hidden; falta en “ul li {}”

Utilizar esta:

 ul li { font-size: 14px; display: inline-block; width: 50px; background-color: red; border: solid black 1px; height: 38px; margin: 0px; padding: 0px; text-align: center; overflow: hidden; } 
 ul li {display:block; float:left;} 

funciona para mi.

JSFiddle