Question

<ol>列出项目编号与其内容不对齐的奇怪问题。请参阅live page或屏幕截图：1，2

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

认为CSS有问题，因为Chrome和Firefox都以这种方式呈现列表，但在样式表中根本找不到任何奇怪的样式。这是HTML5 <ol>的正常行为吗？如何才能使项目编号与其相应内容的顶行对齐，包括宽屏和窄屏？

Answer 1

它与.links-4 a的CSS规则有关。它设置display: inline-block;。如果您将其更改为display: inline，那就没问题了。

Answer 2

这是因为您已将display:inline-block应用于<a>代码。只需将display:block应用于<a>代码

即可

Stack Snippet

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>

<ol>列表项目编号与项目内容不对齐？

2 个答案: