Trying to implement a solution for aligning numbers and text in an ordered list within a border. Found a helpful answer on Stack Overflow:
Left align both list numbers and text
Encountering an issue where long content in one list item overlaps into the next one below it. Here is a demo showcasing the problem:
http://jsfiddle.net/jimmyzaas/36ftkLLq/5/
Here's the code snippet being used:
.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;
}
Looking for suggestions on how to allow list items to adjust their height automatically without overlapping, especially when using absolute positioning. Any recommendations would be greatly appreciated.