Top.Mail.Ru
Ответы
Аватар пользователя
7лет
Изменено
Аватар пользователя
Аватар пользователя
Аватар пользователя
Программирование
+4

CSS. Кнопки наезжают одна на другую.

Пишу вот такой код в CSS:

a.button8 {
position: absolute;
top:50%;
left: 100px;
display: inline-block;
color: white;
font-weight: 700;
text-decoration: none;
user-select: none;
padding: .5em 2em;
outline: none;
border: 2px solid;
border-radius: 1px;
transition: 0.2s;
}

Когда пытаюсь вывести кнопки в HTML:

Установить
удалить

У меня кнопки наезжают друг на друга.

В чем причина я вижу и понимаю, но не понимаю как исправить. Мне нужно поставить кнопки в определенном месте, и чтобы они шли в ряд друг за другом (3,4,5,6 кнопок).

Чтобы одна вставала там, где она встает сейчас, а остальные вставали правее.

Помогите, пожалуйста, исправить! Пробовал по-разному - ничего не получается.

Дополнен

***не добавился код HTML:

[a href="#" class="button8"]Установить [/a]
[a href="#" class="button8"]удалить [/a]

По дате
По рейтингу
Аватар пользователя
Новичок
7лет

Разумеется, наезжают. У тебя же position: absolute; И при этом совершенно одинаковые координаты обеих кнопок: top:50%; left: 100px;

Каждый блок position: absolute ничего не знает о соседних блоках и позиционируется независимо от них.

Либо сделай для одной из кнопок left: 500px; (или сколько там тебе надо).
Либо делай абсолютной позиционирование не кнопок, а блока div, в который эти кнопки завёрнуты.

P.S. Сочетание position: absolute; и display: inline-block; выглядит по меньшей мере странно.

Аватар пользователя
Профи
7лет

Поддерживаю выше написанное . position: absolute

Аватар пользователя
Мыслитель
7лет

_https://codepen.io/WebVortex/pen/jzQMEd