Html 新行上的组件将保持其左边距，从而在css中产生丑陋的结果

我正在调试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>

但是，正如您所看到的，第二行仍然有一些不应该出现的空白。它是

.btn组

左侧的边距（按钮也有此功能，但只有

.btn组

元素在图像中显示不正常）

---

有没有办法消除这种差距？我在谷歌上搜索任何换行符，但我只找到了

：：first-line

伪类。这在这里显然没有用。

您是否尝试过第n种类型的伪类

要针对第二个

.btn组

，您可以使用以下命令：

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

---

由于您不能使用第n种类型的

n，因此针对您的情况，最好的解决方案是删除
左边的边距
，只需在
上使用
右边的边距
，同时，我也不可能知道我需要设计哪一个
n
。人们使用这些类来构建插件，根本无法预测我必须针对哪个
n
。如果我找到一种方法来确定任何不是第一行的行，这个解决方案将在js中工作。我正在寻找一个纯css（或更少）的解决方案。你不能从
中删除
左边距
。按钮组
，然后只使用
右边距
？我绝对可以，它解决了问题。更新你的答案，我会接受。我也这么想。听起来是最好的解决办法。然后使用&:last child{margin right:0；}查看HTML标记会有帮助。@steveax标记可以是任何东西，因为atom允许人们编写自己的插件，这些插件可以使用这些类，
.btn
，
.btn toolbar
，
.btn group
。不过，我会将特定的html添加到示例中。请给我们一些提示
div.btn-group:nth-of-type(2) {
    margin-left: 0;
}