Unordered list with boxes

Question

I have an unordered list where the list items are displayed horizontally. Each list item should contain some text and images. When I add content to them the list item is no longer aligned.

ul {
  list-style-type: none;
  width: 500px;
  height: 500px;
  border: 1px solid black;
}
li {
  border: 1px solid blue;
  display: inline-block;
  height: 100px;
  width: 100px;
}

<ul>
  <li>222</li>
  <li></li>
  <li></li>
</ul>

Jsbin: https://jsbin.com/fobopayaco/edit?html,css,output

Is there som css I can add to fix this? Or should I change my markup?

Answer 1

You can just set vertical-align to top for example

ul {
  list-style-type: none;
  width: 500px;
  height: 500px;
  border: 1px solid black;
}
li {
  border: 1px solid blue;
  display: inline-block;
  vertical-align: top;
  height: 100px;
  width: 100px;
}

<ul>
  <li>222</li>
  <li></li>
  <li></li>
</ul>