左对齐列表编号和长文本

Question

我试图按照这个答案左对齐导航菜单的有序列表中的数字和文字：

Left align both list numbers and text

除了我在有序列表周围有边框，我希望列表适合边框但仍然可以正确对齐。我的问题是如果li内容很长，它会溢出/重叠到它下面的li项目中。例如，这是我的小提琴版本：

http://jsfiddle.net/jimmyzaas/36ftkLLq/5/

代码：

.fixedwidth{
width: 200px;
    background-color: #eee; 
}
.dinosaurs {
    list-style-position: inside;
    margin: 0;
    padding: 0;
    border: 1px solid #ccc;
    width: auto;
}

.dinosaurs li{
   position: relative;
   border-bottom: 1px solid #ccc;
   padding: 3px;

}
.dinosaurs li a {
   position: absolute;
   left: 30px;
}

如何在使用绝对定位时自动调整高度为a，而不会相互重叠？有什么建议？我可以为li设置一个固定的高度，但这会使所有其他li内容不必要地高。

Answer 1

.dinosaurs li {
    position: relative;
    border-bottom: 1px solid #ccc;
    padding: 3px;
    overflow-x: hidden;
    //overflow-x: auto;
}

您可以使用overflow-x: hidden;或overflow-x: auto;

auto会导致滚动条显示，而hidden只会隐藏溢出。