


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]
Разумеется, наезжают. У тебя же position: absolute; И при этом совершенно одинаковые координаты обеих кнопок: top:50%; left: 100px;
Каждый блок position: absolute ничего не знает о соседних блоках и позиционируется независимо от них.
Либо сделай для одной из кнопок left: 500px; (или сколько там тебе надо).
Либо делай абсолютной позиционирование не кнопок, а блока div, в который эти кнопки завёрнуты.
P.S. Сочетание position: absolute; и display: inline-block; выглядит по меньшей мере странно.
Поддерживаю выше написанное . position: absolute
_https://codepen.io/WebVortex/pen/jzQMEd