html - Components on a new line will keep their margin-left, resulting in an ugly outcome in css

Question

I'm debugging the Atom-editor, a user reported that buttons get stacked oddly if the window size becomes too small.

Note that in Atom, people are allowed to write plugins, and that the markup will differ per plugin.

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

I've added a margin-bottom to all immediate children of the element, fixing part of the issue. See the .less below.

@import 'ui-variables';

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

However, as you can see there's still some whitespace at the second line that shouldn't be there. It's the margin-left of a .btn-group (buttons have this too, but there are only .btn-group elements shown misbehaving in the image).

Is there any way to remove that margin? I googled for selecting any newline, but all I found was the ::first-line pseudoclass. Which is obviously not useful here.

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