html - 响应按钮 css 之间的差距

Question

我需要制作响应式 50% 类别按钮(或等宽、响应式和居中)，始终在同一行中放置两个按钮。

问题

看似简单实则棘手，如何制作一个 20px 的白色中间空隙？

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>

Answer 1

您只需更改宽度以使用 li 元素的 calc() 方法调整两个按钮之间的空间即可获得结果。试试这个代码。

.gifsMainCategories li{
    display:inline-block;
    width:40%;
    font-size:16px;
    height:60px;
    line-height:60px;
    background:red; 
    margin:10px;
}