当一个为空时，内联块列表项会乱七八糟 [英] inline-block list items mess up when one is empty

问题描述

我想在第一个列表项中添加一些图片，但是当它没有内容时，它似乎会乱七八糟。我尝试了各种方法在 jsfiddle （显示和位置的各种选项），但没有一个工作首先为空时，对齐内联li。它似乎是内联属性的问题。 Do enyone有这样的热闹的问题，并有明确的解决方案。

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;} 不起作用

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是基线， wich设置行高）

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

演示示例

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>

这篇关于当一个为空时，内联块列表项会乱七八糟的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！