CODEWITHSUNDEEP
css
Satrughna
Satrughna

Reputation: 93

CSS column count showing something mess

enter image description here

The above one is just a ul and li, i have added column count on ul. On hovering <a> tag it shows half in first column and another half in second column.

I have tried

display: inline-block;
display: block;

But i am getting same result. My code is below.

HTML

<ul class="classname">
    <li><a href="#">Column 1 - 1</a></li>
    <li><a href="#">Column 1 - 2</a></li>
    <li><a href="#">column 2</a></li>
    <li><a href="#">column 3 - 1</a></li>
    <li><a href="#">column 3 - 2</a></li>
    <li><a href="#">column 4</a></li>
</ul>

css

.classname {
    -webkit-column-count: 4;
    -moz-column-count: 4;
    -o-column-count: 4;
    column-count: 4;
}
.classname li {
    font-size: 15px;
    color: black;
    display: block;
    margin: 0px;
}
.classname li a {
    display: block;
    padding: 6px 10px;
    font-size: 13px;
    color: #444;
    letter-spacing: 0.5px;
}

Upvotes: 0

Views: 59

Answers (1)

Banzay
Banzay

Reputation: 9470

I think you need to play around break-inside: avoid-column;:

.classname {
    -webkit-column-count: 4;
    -moz-column-count: 4;
    -o-column-count: 4;
    column-count: 4;
}
.classname li {
    font-size: 15px;
    color: black;
    display: block;
    margin: 0px;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid-column;
}
.classname li a {
    display: block;
    padding: 6px 10px;
    font-size: 13px;
    color: #444;
    letter-spacing: 0.5px;
}
li:nth-child(even) {
  background: teal;
}
<ul class="classname">
    <li><a href="#">Column 1 - 1</a></li>
    <li><a href="#">Column 1 - 2</a></li>
    <li><a href="#">column 2</a></li>
    <li><a href="#">column 3 - 1</a></li>
    <li><a href="#">column 3 - 2</a></li>
    <li><a href="#">column 4</a></li>
</ul>

Upvotes: 2

Related Questions