当一个空的时，内联块列表项会搞乱(inline

我想在第一个列表项中放置一些图像，但是当它没有内容时似乎搞砸了。 我在jsfiddle （显示和位置的各种选项）中尝试了各种方法，但是当第一个为空时，它们都没有用于对齐内联al“li”。 它似乎是内联属性的问题。 enyone有这样的搞笑问题，并有明确的解决方案。

PS： ul li {display：block; float：left;}不起作用

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;
} 
  
<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> 
  
 
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 of them works to align inline al "li" when first is empty. it seems to be problem with inline property. Do enyone had such hilarious problem, and have clear solution.
 
PS: ul li {display:block; float:left;} doesn't work
 
 
 
  
  
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;
} 
  
<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> 
  
 

                
最满意答案
                
                    
                        
 你需要将vertical-align属性重置为vertical-align:top; （defaut是基线，取决于设置行高的内容） 
 
 https://www.w3.org/TR/CSS2/visudet.html#propdef-vertical-align 
 
 玩的例子 
 
 
 
  
  
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> 
  
 
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>