Firefox的CSS保证金

Question

我已经写了一个CSS边距复选框之间的间距。它适用于Chrome，但不是在Firefox的罚款。

这里是CSS

.vehicle-types {
  float:left;
  width:100%;
  margin: 6px 0;
  .check-vehicle {
    float:left;
    width:100%;
    .checkbox-btn {
      width: auto;
      display: inline-block;
      margin-right: 20px;
      float:left;
      input {
        float:left;
        width:0 !important;
      }
      label {
        margin:0 !important;
        float:left;
      }
    }
  }
}

有没有Firefox浏览器特定的CSS？ （下面截图）在此先感谢。

铬

火狐

Answer 1

好了，所以我是你推你的后期编辑之前写这个答案。我仍然要经过代码，但作为替代你可以试试这个，看看是否可行与否

更新：您只共享CSS这还是很难理解

一个理想的解决方案，对同一行一切都会做。

.parent-div {
display: flex; 
flex-direction: row;
justify-content: space-between
}

.child-div {
align-items: center;
display: flex;
flex-direction: row;
}

.create-box {
height: 30px;
width: 30px;
border: 1px solid black;
}

p {
margin-left: 5px;
}

<div class="parent-div"> 
  <div class="child-div">
   <span class="create-box"> </span>
   <p> checkBox 1 </p>
  </div> 
   <div class="child-div">
   <span class="create-box"> </span>
   <p> checkBox 1 </p>
  </div> 
   <div class="child-div">
   <span class="create-box"> </span>
   <p> checkBox 1 </p>
  </div> 
</div>
   

在上面的代码我已经使用flex

qazxsw POI说，你是否希望你的div在行或即认为这有点相当于引导类qazxsw POI列堆叠。 （如果你已经使用引导以前）

flex-direction：空间之间给出每平方之间相等的空间，但它不和容器之间。

注意：您可能也有使用空间周围

row穿上的正方形的任一侧的空间相等的缓冲 - 这意味着最外正方形之间的空间与容器是半多达（两个正方形之间的空间中的每个正方形贡献裕度的非重叠相等量，从而倍增空间）。

justify-content: space-between只对准一个div内一切跨越X-Y轴中心

我发现这篇文章的时候学习Space-around（可以帮助你为好）非常有用

Answer 2

你看，Firefox的版本补充说，保证金的第一个孩子以及..

为了避免这种情况，使用方法：

align-items: center;

Answer 3

我有这样的问题，但也与IE，下一次你可以使用此代码它只会显示在Firefox上，你可以编辑你想要的，它只会显示在Firefox

flexboxes

我知道它不是一个问题，从您的代码，但如果是这样的话，你可以去：

.checkbox-btn:not(:first-child) {
  ...
  margin-right: 20px;
  ...
}

并检查它是否是你的代码