Html 将有序列表编号与内容的第一行对齐

我有一个有序列表，可以包含任意数量的元素。每个元素的大小可以不同，但无论大小，我都希望有序列表的编号与内容的第一行对齐。因此，我想要实现的是：

我爱你，我爱你，我爱你。。。 方框1 请参阅我的JSFIDLE以了解我遇到的问题

这是我的HTML和CSS

.盒子{ 显示：表格； 宽度：100%； 身高：100%； } .盒子{ 显示：表格单元格； } .box1{ 背景：橙色； 宽度：75%； } .box2{ 背景：黄色； } Lorem ipsum dolor sit amet，是一位杰出的献身者。莫比·奎斯调味品马萨。奎斯克·普鲁斯·尼什，菲尼布斯·普莱斯利·普莱斯利·普莱斯利，非麦格纳大学。我只是酒后驾车，特里斯蒂克和梅特斯在，弗林利亚·维韦拉·伊普苏姆。这是一种发酵剂， 临时性前生命。我是梅特斯。这是我自己的观点，是我自己的观点，是我自己的观点。这是我的生活。设施性粉虱。在妊娠期最大子宫内膜上无便利性。 对 不 方框1 方框2

---

更新答案。它也适用于IE

使用显示：内联表

演示：

.盒子{ 显示：内联表； 宽度：100%； 身高：100%； } .盒子{ 显示：表格单元格； } .box1{ 背景：橙色； 宽度：75%； } .box2{ 背景：黄色； 宽度：25%； } Lorem ipsum dolor sit amet，是一位杰出的献身者。莫比·奎斯调味品马萨。奎斯克·普鲁斯·尼什，菲尼布斯·普莱斯利·普莱斯利·普莱斯利，非麦格纳大学。我只是酒后驾车，特里斯蒂克和梅特斯在，弗林利亚·维韦拉·伊普苏姆。马来酸酐是一种发酵剂，是暂时的生命。我是梅特斯。这是我自己的观点，是我自己的观点，是我自己的观点。这是我的生活。设施性粉虱。在妊娠期最大子宫内膜上无便利性。 对 不 方框1 方框2

---

这对你有用吗

.盒子{ 显示：表格； 宽度：100%； 身高：100%； 浮动：对； } 李{ 明确：两者皆有； } .盒子{ 显示：表格单元格； } .box1{ 背景：橙色； 宽度：75%； } .box2{ 背景：黄色； } Lorem ipsum dolor sit amet，是一位杰出的献身者。莫比·奎斯调味品马萨。奎斯克·普鲁斯·尼什，菲尼布斯·普莱斯利·普莱斯利·普莱斯利，非麦格纳大学。我只是酒后驾车，特里斯蒂克和梅特斯在，弗林利亚·维韦拉·伊普苏姆。马来酸酐是一种发酵剂，是暂时的生命。我是梅特斯。这是我自己的观点，是我自己的观点，是我自己的观点。这是我的生活。设施性粉虱。在妊娠期最大子宫内膜上无便利性。 对 不 方框1 方框2 使用显示：内联flex；代替显示：表格；为你们班准备。盒子

如果要保持方框下方的空间，可以在底部添加边距：20px；：

.盒子{ 显示：内联flex； 宽度：100%； 身高：100%； 边缘底部：20px； } .盒子{ 显示：表格单元格； } .box1{ 背景：橙色； 宽度：75%； } .box2{ 背景：黄色； 宽度：25%； } 李{ 明确：两者皆有； } Lorem ipsum dolor sit amet，是一位杰出的献身者。莫比·奎斯调味品马萨。奎斯克·普鲁斯·尼什，菲尼布斯·普莱斯利·普莱斯利·普莱斯利，非麦格纳大学。我只是酒后驾车，特里斯蒂克和梅特斯在，弗林利亚·维韦拉·伊普苏姆。马来酸酐是一种发酵剂，是暂时的生命。我是梅特斯。这是我自己的观点，是我自己的观点，是我自己的观点。这是我的生活。设施性粉虱。在妊娠期最大子宫内膜上无便利性。 对 不 方框1 方框2

---

你还想在.box之间留出一段距离吗？有趣的是：我认为内容的呈现方式正是你在Firefox上所希望的。在Google Chrome和Safari上，我看到在内容开始之前，排序列表的编号后面出现了换行。所以我认为您的目标是消除所有浏览器中的可视换行，对吗？在类中将display:table更改为display:inline flex。boxes@chirag将table更改为inline flex会使内容行的顶部向上，但当您从第一行转到第二行时，也会导致分隔两列的垂直线发生变化。。。或者至少这是我观察到的；我现在将把我的提琴与你在回答中发布的内容进行比较…只有当浏览器宽度足够窄时，行之间的单元格宽度变化的问题才会出现，但对我来说@chirag的JSFIDLE确实出现了这个问题…这在Chrome中非常有效，但不幸的是在IE中不起作用。列表项编号

---

r出现在左下角，而不是左上角。对于其他对此处与原始代码之间的差异感到好奇的人：Mers在.box中添加了一个float:right，并添加了一个li{clear:both}。显然，这两种变化都是必要的；如果你去掉li{clear:tweet}，这两个数字都会出现在表的顶部。这解决了我在Chrome和IE中的问题！非常感谢。这在Chrome中非常有效，但不幸的是在IE中效果不佳。列表项编号显示在左下角，而不是左上角。我已更新了答案。它也可以在IE上运行。您可以检查它。我可以确认它现在在IE中运行。我目前仍在使用@Mers解决方案运行，但如果我遇到任何问题，我将尝试此解决方案。