CSS中的居中块

GoogleParamoik 发表于 Dev

GoogleParamoik

我在列表中有几个方块，我需要没有任何边距的位置中心。这样，但没有保证金。

ul{
  margin:0px;
  padding:0px
} 
.colors{
    padding-left: 50px;
    padding-right: 50px;
}
 .colors li{
    display: inline-block;
    list-style: none;
    height: 8px;
    width: 38px;
    margin: 0;
    padding: 0; 
}
.product{
width: 450px;
  text-align:center;
  box-shadow:0px 0px 15px rgba(0,0,0,.3);
}

<div class="product">  
  <div class="colors">                            
    <ul>
      <li style="background-color:#00ff00;"></li>
      <li style="background-color:#0f0f00;"></li>
      <li style="background-color:#f00f00;"></li>
      <li style="background-color:#00f00f;"></li>
      <li style="background-color:#00ff00;"></li>
      <li style="background-color:#0f0f00;"></li>
      <li style="background-color:#f00f00;"></li>
      <li style="background-color:#00f00f;"></li>
      <li style="background-color:#00ff00;"></li>
      <li style="background-color:#0f0f00;"></li>
      <li style="background-color:#f00f00;"></li>
      <li style="background-color:#00f00f;"></li>
    </ul>
  </div>
</div>

不要使用Javascript。只是CSS。现在打开了display:inline-block，但是当内联块时，我有一些边距。

西里尔

如果您将其设置ul为flex容器，它将被擦除white-space。

您可以添加一些垂直margin向li和padding，如果需要的父容器

ul{
  margin:0px;
  padding:0px;
    display:flex;
  justify-content:center;
  flex-wrap:wrap;
} 
.colors{
    padding-left: 50px;
    padding-right: 50px;
}
 .colors li{
    display: inline-block;
    list-style: none;
    height: 8px;
    width: 38px;
    margin: 0;
    padding: 0; 
}

.product{
width: 450px;
  text-align:center;
  box-shadow:0px 0px 15px rgba(0,0,0,.3);
}

<div class="product">  
  <div class="colors">                            
    <ul>
      <li style="background-color:#00ff00;"></li>
      <li style="background-color:#0f0f00;"></li>
      <li style="background-color:#f00f00;"></li>
      <li style="background-color:#00f00f;"></li>
      <li style="background-color:#00ff00;"></li>
      <li style="background-color:#0f0f00;"></li>
      <li style="background-color:#f00f00;"></li>
      <li style="background-color:#00f00f;"></li>
      <li style="background-color:#00ff00;"></li>
      <li style="background-color:#0f0f00;"></li>
      <li style="background-color:#f00f00;"></li>
      <li style="background-color:#00f00f;"></li>
    </ul>
  </div>
</div>