My goal is to design a columned list using only HTML and CSS. I have experimented with floats and inline-block, but it seems like inline-block is the best option for me due to these specific requirements:
- The layout must be in columns;
- The number of columns should adjust automatically;
- The height of the columns can vary, but the width may be fixed if needed.
The issue arises when the heights of the list items differ, causing gaps between them instead of aligning directly below one another.
This is how my structure looks:
CSS
.columnlist li {
display:inline-block;
vertical-align:top;
}
HTML
<ul class='columnlist'>
<Li><H6>List 1 of 4</H3>
<UL><LI>List item 1</LI>
<LI>2ND List Item</LI>
<LI>Item in List 3</LI>
<LI>Final Item</LI></UL></LI>
<Li><H6>List 2 of 4</H3>
<UL><LI>Penultimate LI</LI>
<LI>Final Constituant</LI></UL></LI>
<Li><H6>List 3 of 4</H3>
<UL><LI>Opening Movement</LI>
<LI>Closing Component</LI></UL></LI>
<Li><H6>List 4 of 4</H3>
<UL><LI>Original Child</LI>
<LI>2nd Element</LI>
<LI>Then the 3rd</LI>
<LI>And Last But Not Least</LI></UL></LI>
</UL>
Is there a way to eliminate the vertical space around the elements using CSS?
Note: While I believe this approach might solve the issue, are there alternative methods to achieve the same result? Multi-column CSS lists