Firefox 的 CSS 边距答案

【问题标题】：CSS margin for FirefoxFirefox 的 CSS 边距
【发布时间】：2019-06-25 23:07:29
【问题描述】：

我已经为复选框之间的间距编写了 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？（以下截图）提前致谢。

铬

火狐

【问题讨论】：

向我们展示两张屏幕截图，一张在 Chrome 中，一张在 Firefox 中，并告诉我们出了什么问题。在那之前，它看起来像是 Firefox 的保证金问题，而且是重复的。不要使用!important。这是一种不好的做法。
你是说火狐吗？ Mozilla 是一家公司，而不是浏览器。
在 div 中包装复选框并使用 flexbox + justify-content。不要使用!important
@Vlad Flexbox 有点矫枉过正。
作为代码还不够.. CSS 单独无用，我们需要一个完整的代码 (HTML+CSS) 以便我们可以运行它并查看输出

标签： html css sass

【解决方案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

flex-direction 表示您是否希望您的 div 以行或列的方式堆叠，即考虑这个 有点等效 到 bootstrap 类@ 987654326@。（如果您以前使用过引导程序）

justify-content: space-between：space-between 使每个方格之间的空间相等，但不与容器之间。

注意：你也可以使用空格

Space-around 在正方形的两侧放置相等的空间垫 — 这意味着最外面的正方形和容器之间的空间是两个正方形之间的空间的一半（每个正方形贡献不重叠的等量边距，从而使空间加倍）。

align-items: center; 只需将 div 内的所有内容对齐到 x-y 轴的中心

我发现这篇文章在了解 flexboxes 时非常有用（也可能对您有所帮助）

【讨论】：

我在我的代码上尝试了你的答案。它只是作为魅力。你拯救了我的一天。非常感谢。
如果这可以帮助您/解决您的问题。投票/标记此回答。很高兴为您提供帮助。
赞成答案，因为我的声誉低于 15，所以它没有出现。
在这种情况下标记这个答案（你能看到那个勾号图标吗？）

【解决方案2】：

我也有这种问题，但是用IE，下次你可以使用这个代码它只会在firefox上显示，你可以编辑你想要的，它只会在firefox上显示

@-moz-document url-prefix() {
  //just write the code here
     }

我知道您的代码没有问题，但如果是这种情况，您可以转到： https://caniuse.com/

并检查它是否是您的代码

【讨论】：

【解决方案3】：

看，Firefox 版本也将那个边距添加到第一个孩子......

为避免这种情况，请使用：

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

【讨论】：