左对齐列表编号和长文本答案

【问题标题】：Left align both list numbers and LONG text左对齐列表编号和长文本
【发布时间】：2014-08-06 23:54:04
【问题描述】：

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

除了我在有序列表周围有一个边框并且我希望列表适合边框但仍然正确对齐。我的问题是如果 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;
}

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

【问题讨论】：

标签： html css

【解决方案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 只是隐藏溢出。

【讨论】：

我不认为可以使用溢出：隐藏，因为它最终会隐藏内容。 overflow:auto 也不起作用，因为它会导致出现滚动条。