CODEWITHSUNDEEP
htmlcss
Dan
Dan

Reputation: 517

gap between responsive buttons css

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

Answers (3)

Aryan Twanju
Aryan Twanju

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

Fecosos
Fecosos

Reputation: 974

Since OP wants to avoid calc the widtha 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

Hiren Vaghasiya
Hiren Vaghasiya

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

Related Questions