html - <ol> 列表元素编号与元素内容不一致？

Question

奇怪的问题<ol>列表项编号与其内容不一致。参见 live page或截图:1 , 2

看到有序列表的行号与其内容不对齐。当屏幕很宽时它们都在下面，当屏幕很窄时它们都在空中。

认为是 CSS 有问题，因为 Chrome 和 Firefox 都以这种方式呈现列表，但在样式表中根本没有发现任何奇怪的样式。这是 HTML5 的正常行为吗 <ol> ？如何使元素编号与其相应内容的顶行对齐，无论是宽屏还是窄屏？

Answer 1

这是因为您申请了display:inline-block到 <a>标签。申请即可display:block到 <a>标签

堆栈片段

a {
  display: block;
  margin-bottom: 10px;
}

<ol>
  <li> <a>http://n3.datasn.io/data/api/v1/n3_lyz/cars_and_powersports_vehicle_and_motorcycle_and_boat_14/atv/list/?app=html-bunker</a>
  </li>
  <li> <a>http://n3.datasn.io/data/api/v1/n3_lyz/cars_and_powersports_vehicle_and_motorcycle_and_boat_14/atv/list/?app=html-bunker</a>
  </li>
  <li> <a>http://n3.datasn.io/data/api/v1/n3_lyz/cars_and_powersports_vehicle_and_motorcycle_and_boat_14/atv/list/?app=html-bunker</a>
  </li>
  <li> <a>http://n3.datasn.io/data/api/v1/n3_lyz/cars_and_powersports_vehicle_and_motorcycle_and_boat_14/atv/list/?app=html-bunker</a>
  </li>
</ol>