Question

我在列表中有几个块，我需要它没有任何边距，位置中心。像这样，但没有边际。

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上，但是当内联块我有一些边距时。

Answer 1

默认情况下，浏览器为文本间距提供3px空间，但在您的情况下，您没有文本，因此您只需添加

ul{
  font-size:0;
}

Answer 2

如果将ul设置为弹性容器，则会删除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>

Answer 3

您无需为此使用任何代码，只需缩小HTML代码并自动删除空格。

像这样：

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

Css

3 个答案: