Pankaj Morajkar Pankaj Morajkar - 6 months ago 20
HTML Question

CSS: Breaking a Unordered List

I want to break a unordered list using CSS. What i currently have is this

What i require is this

Scenario after Marcus code

Here is the html

<div class="tab-content">
<div class="tab-content-block">
<div class="home-subheading">'Functional Requirement Documents'</div>
<ul style="list-style: none;">
<li><a href="https://prod.us/System_Functionality/Functional_
Requirement_Documents/Agent_and_Commission">'Agent and Commission'</a></li>
<li><a similar other 21 li</a></li>
</ul>
</div>


Here's the CSS

tab-content {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: left;
margin-left: 2.2em;
}
.tab-content-block {
padding: 0 1em 1em .5em;
min-width: 25%;
}
.tab-content-block ul li {
margin-bottom:10px;
margin-left:-17px;
}

Answer

You can use columns only in the <ul>.

.tab-content-block ul {
  -webkit-column-count: 2;
     -moz-column-count: 2;
          column-count: 2;
}

See it working:

https://jsfiddle.net/hrm3tx9j/1/

Comments