Question

我需要设计如下：

   Total Maximum Daily Load, EPA

模拟污染物的命运和运输
每日最大负载总量（TMDL）开发

如您所见，“每日总负载量”需要与项目符号“建模......”和“总计......”保持一致。

所需的对齐显示在Internet Explorer和firefox中，但在chrome中显示如下

 Total Maximum Daily Load, EPA

模拟污染物的命运和运输
每日最大负载总量（TMDL）开发

“每日总负载量”与子弹点的“建模”和“总计”不一致，为什么它在一个浏览器中工作而在其他浏览器中不起作用？如何使这个缩进浏览器独立。

Answer 1

最简单的解决方案可能是将第一个文本作为列表中的项目但没有项目符号：

<ul>
<li style="list-style: none">Total Maximum Daily Load, EPA
<li>Modeling the Fate and Transport of Pollutants
<li>Total Maximum Daily Load (TMDL) Development
</ul>

另一种解决方案是从ul和li中移除所有边距和填充（这是导致问题的浏览器差异），然后为ul设置左边距并且第一个文本上的左边距相同。请注意，这会从ul中删除默认的垂直边距，因此除了调整左边距值之外，您可能还希望添加它们。（值1.3em左右可能是最小的安全值，在列表项目符号适合的意义上是安全的。）

<style>
ul, li {
  margin: 0;
  padding: 0;
}
ul, .list-header {
  margin-left: 1.3em;
}
</style>
<div class="list-header">Total Maximum Daily Load, EPA</div>
<ul>
<li>Modeling the Fate and Transport of Pollutants
<li>Total Maximum Daily Load (TMDL) Development
</ul>

当CSS缩进在所有浏览器中都不起作用时，我该如何解决？

1 个答案: