Компоненты в новой строке сохранят свои поля слева, что приведет к уродливому результату в css

#html #css #less #atom-editor

#HTML #css #Меньше #atom-редактор

Вопрос:

Я отлаживаю Atom-editor, пользователь сообщил, что кнопки странно складываются, если размер окна становится слишком маленьким.

Обратите внимание, что в 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 элементы показаны неправильно).

Есть ли какой-либо способ удалить это поле? Я поискал в Google для выбора любой новой строки, но все, что я нашел, был ::first-line псевдокласс. Что, очевидно, здесь бесполезно.

1. Это помогло бы увидеть разметку HTML.

2. Разметка @ steveax может быть любой, поскольку atom позволяет пользователям писать свои собственные плагины, и эти плагины могут использовать эти классы, .btn , .btn-toolbar , .btn-group среди прочих. Однако я добавлю html, специфичный для примера.

3. Пожалуйста, дайте нам подсказку

Ответ №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

1. Это никогда не сработает, поскольку ширина .btn-toolbar , .btn-group и .btn является переменной, а также то, что я не могу знать, какой nth из них мне нужно стилизовать. Люди используют эти классы для создания плагинов, просто нет способа предсказать, на какой nth я должен ориентироваться. Это решение сработало бы в js, если бы я нашел способ определить любую строку, которая не является первой. Я ищу чисто css-решение (или меньше).

2. Разве вы не можете удалить margin-left из .button-groups и использовать только margin-right тогда?

3. Я абсолютно могу, и это устраняет проблему. Обновите свой ответ, и я приму его.

4. Думал о том же самом. Звучит как лучшее решение. и затем используйте amp;:last-child { margin-right: 0; }