Reputation: 517
I need to make responsive 50%
categories buttons (or equal width, responsive and centered), always two in the same row.
PROBLEM
Looks easy but its tricky, how do I make a 20px white middle gap?
div{
margin: 0 auto;
max-width:400px;
}
.gifsMainCategories{
list-style:none;
font-size:0;
margin:10px auto;
padding:0;
text-align:center;
width:100%;
}
.gifsMainCategories li{
display:inline-block;
width:50%; font-size:16px;
height:60px;
line-height:60px;
background:red;
margin:10px auto;
}
.gifsMainCategories li:nth-child(2n+1) {
background: #17bf63;
}
.gifsMainCategories li:nth-child(2n+2) {
background: #794bc4;
}
<div>
<ul class="gifsMainCategories">
<li>Dance</li>
<li>shame</li>
<li>love</li>
<li>anger</li>
<li>scare</li>
<li>shocking</li>
<li>claps</li>
<li>sad</li>
<li>well done</li>
<li>Win</li>
<li>really?</li>
<li>I dont know...</li>
<li>Dream</li>
<li>Boring</li>
<li>Slap</li>
<li>Oops...</li>
</ul>
</div>
Upvotes: 1
Views: 335
Reputation: 2516
You can achieve the result just by changing your width to adjust the space between two buttons using calc() methond for li element. Try this code.
.gifsMainCategories li{
display:inline-block;
width:40%;
font-size:16px;
height:60px;
line-height:60px;
background:red;
margin:10px;
}
Upvotes: 1
Reputation: 974
Since OP wants to avoid calc
the width
a solution using flex
and the border
property to simulate the margins could be:
.gifsMainCategories{
list-style:none;
padding:0;
text-align:center;
width:100%;
display: flex;
flex-wrap: wrap;
box-sizing: border-box;
}
.gifsMainCategories li{
box-sizing: inherit;
font-size:16px;
height:60px;
width: 50%;
border: 5px solid white;
line-height: 60px;
}
Also added box-sizing: border-box;
I don't know if it is set for everything in your original css
Upvotes: 0
Reputation: 5544
You can do this for that using
* {
box-sizing: border-box;
}
div{
margin: 0 auto;
max-width:400px;
}
* {
box-sizing: border-box;
}
.gifsMainCategories{
list-style:none;
font-size:0;
margin:10px auto;
padding:0;
text-align:center;
width:100%;
}
.gifsMainCategories li{
width:50%; font-size:16px;
height:60px;
line-height:60px;
margin:10px auto;
padding:0px 10px 0px 0px;
float:left;
}
.gifsMainCategories li:nth-child(2n){
padding:0px 0px 0px 10px;
}
.gifsMainCategories li div{
font-size:16px;
width:100%;
height:60px;
line-height:60px;
background:red;
}
<div>
<ul class="gifsMainCategories">
<li><div>Dance</div></li>
<li><div>shame</div></li>
<li><div>Dance</div></li>
<li><div>shame</div></li>
<li><div>Dance</div></li>
<li><div>shame</div></li>
<li><div>Dance</div></li>
<li><div>shame</div></li>
<li><div>Dance</div></li>
<li><div>shame</div></li>
</ul>
</div>
Upvotes: 0