Question

我需要制作响应式50%类别按钮（或相等的宽度，响应和居中），总是两个在同一行。

问题

看起来很简单但很棘手，我如何制作20px白色中间间隙？

＆＃13;

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;
   }

＆＃13;

<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>

＆＃13;

Answer 1

您可以通过更改宽度来实现结果，以使用calc（）methond for li element调整两个按钮之间的空间。试试这段代码。

$props = 'BakId', 'Lsn', 'Name'
$list | Group-Object -Property $props | ForEach-Object {
   $propDefs = [ordered] @{}
   foreach ($i in 0..($props.Length-1)) { $propDefs.[$props[$i]] = $_.Values[$i] }
   $propDefs.Files = $_.Group | Select-Object File, Size
   New-Object PSCustomObject -Property $propDefs
}

Answer 2

您可以使用

执行此操作

* {
    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>

Answer 3

由于OP想要使用calc避免使用width flex解决方案而使用border属性来模拟边距可能是：

.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;
}

同时添加box-sizing: border-box;我不知道是否为原始css中的所有内容设置了<{1}}

响应按钮之间的差距css

3 个答案: