inline-block list items mess up when one is empty

Question

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 no

Answer 1

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