Inline-block List Items Mess Up When One Is Empty

I wanted to put some image in first list item but it seems to mess up when it's no content. i tried various methods in jsfiddle (various options of display and position) but none o

Solution 1:

you need to reset vertical-align propertie to vertical-align:top; (defaut is baseline and depends on content wich sets the line-height)

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

examples to play with

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;
}

<ul>
  <li>

    <!--no content list item, why it mess up align to top others-->
  </li>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ul>

Solution 2:

Add vertical-align: top; to your li elements.

Solution 3:

overflow: hidden; is missing into "ul li { }"

Use this:

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;
}

Solution 4:

ul li {display:block; float:left;} 

works for me.

JSFiddle