I have a parent div element with several child div elements, each containing a button. I need to insert a line break after every 4th child div element.
<div class="btn-container">
<div class="btn-div"><button class="btn">+</button></div>
<div class="btn-div"><button class="btn">-</button></div>
<div class="btn-div"><button class="btn">*</button></div>
<div class="btn-div"><button class="btn">/</button></div>
<div class="btn-div"><button class="btn">7</button></div>
<div class="btn-div"><button class="btn">8</button></div>
<div class="btn-div"><button class="btn">9</button></div>
<div class="btn-div"><button class="btn">C</button></div>
<div class="btn-div"><button class="btn">4</button></div>
<div class="btn-div"><button class="btn">5</button></div>
<div class="btn-div"><button class="btn">6</button></div>
<div class="btn-div"><button class="btn">%</button></div>
<div class="btn-div"><button class="btn">1</button></div>
<div class="btn-div"><button class="btn">2</button></div>
<div class="btn-div"><button class="btn">3</button></div>
<div class="btn-div"><button class="btn">=</button></div>
</div>
What's the CSS solution for this issue? Here is what I tried:
.btn{
height: 5em;
width: 5em;
}
.btn-div{
display: inline-block;
}
.btn-container div:nth-of-type(4n)::after{
content: '\A';
display: block;
height: 2em;
width: 2em;
}