当一个空的时候，内联阻止列表项会搞乱

Question

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

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

您需要将vertical-align属性重置为vertical-align:top; （defaut是基线，取决于设置行高的内容）

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>

Answer 2

将vertical-align: top;添加到您的li元素。

Answer 3

overflow: hidden;缺少＆＃34; ul li {}＆＃34;

使用此：

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

Answer 4

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

适合我。

JSFiddle