I am in the process of creating an alphabetized list of categories, from A-Z. I am utilizing ul and li elements to achieve this. My goal is to have the elements displayed consecutively, regardless of their height. While my current code successfully arranges the elements, it encounters issues when the block contains a large number of elements, causing the layout to break.
Here is my current code:
ul > li{
display:inline-block;
padding:10px;
background:#eee;
width:calc(100% / 4);
box-sizing:border-box;
}
ul > li > ul{
display:block;
}
ul > li > ul > li{
display:block;
}<ul>
<li>
<h2>A</h2>
<ul>
<li>Text 1</li>
<li>Text 2</li>
<li>Text 3</li>
<li>Text 4</li>
<li>Text 5</li>
</ul>
</li>
<li>
<h2>B</h2>
<ul>
<li>Text 1</li>
<li>Text 2</li>
<li>Text 3</li>
<li>Text 4</li>
<li>Text 5</li>
</ul>
</li>
<li>
<h2>C</h2>
<ul>
<li>Text 1</li>
<li>Text 2</li>
<li>Text 3</li>
<li>Text 4</li>
<li>Text 5</li>
</ul>
</li>
<li>
<h2>D</h2>
<ul>
<li>Text 1</li>
<li>Text 2</li>
<li>Text 3</li>
<li>Text 4</li>
<li>Text 5</li>
<li>Text 6</li>
<li>Text 7</li>
<li>Text 8</li>
<li>Text 9</li>
<li>Text 10</li>
</ul>
</li>
<li>
<h2>E</h2>
<ul>
<li>Text 1</li>
<li>Text 2</li>
<li>Text 3</li>
<li>Text 4</li>
<li>Text 5</li>
</ul>
</li>
</ul>What steps should I take to address this issue?