html - 新行上的组件将保持其 margin-left，导致 css 中的丑陋结果

Question

我正在调试 Atom 编辑器，一位用户报告说，如果窗口太小，按钮会奇怪地堆叠。

请注意，在 Atom 中，人们可以编写插件，并且每个插件的标记都不同。

<div class="btn-toolbar">
    <div class="btn-group">
        <button class="btn">One</button>
        <button class="btn">Two</button>
        <button class="btn">Three</button>
    </div>
    <div class="btn-group">
        <button class="btn">Four</button>
        <button class="btn">Five</button>
    </div>
    <button class="btn">Six</button>
    <button class="btn">Seven</button>
</div>

我已经为该元素的所有直接子元素添加了 margin-bottom，解决了部分问题。请参阅下面的 .less。

@import 'ui-variables';

.btn-toolbar > * {
    // @component-padding is 10px, for the people who don't know less.
    margin-bottom: @component-padding/2;     
}

但是，如您所见，第二行仍有一些不应该出现的空格。它是 .btn-group 的左边距(按钮也有这个，但只有 .btn-group 元素在图像中显示为行为不当)。

有什么办法可以消除这个边距吗？我用谷歌搜索选择任何换行符，但我发现的只是 ::first-line 伪类。这显然在这里没有用。

Answer 1

您是否尝试过nth-of-type 伪类？

要定位第二个 .btn-group，您可以使用如下内容:

div.btn-group:nth-of-type(2) {
    margin-left: 0;
}

因为你不能使用 nth-of-type 你的情况的最佳解决方案是删除 margin-left 并只使用 margin-right 在 .btn-group

上