Коротко: сдвинуть элемент вправо можно через margin-left (простейший сдвиг), margin-left: auto во flex (прижать к правому краю), text-align: right (для текста), position: absolute; right: 0 (в угол родителя) или transform: translateX() (визуально). Выбор зависит от того, что именно нужно.
Выбор способа
| Задача | Способ |
|---|---|
| Текст вправо внутри блока | text-align: right |
| Прижать элемент к правому краю | margin-left: auto (flex) |
| Сдвинуть на несколько пикселей | margin-left или transform: translateX() |
| Разместить в правом верхнем/нижнем углу | position: absolute; right: 0 |
Вкладки: способы с кодом
.price { text-align: right; }Для текста и инлайн-блоков внутри общего блока. Просто и без побочных эффектов.
.toolbar {
display: flex;
align-items: center;
gap: 12px;
}
.toolbar .btn-right { margin-left: auto; }margin-left: auto «отталкивает» элемент к правому краю flex-строки. Часто применяют для кнопки «Войти» в шапке.
.dot { margin-left: 8px; }
.badge { transform: translateX(6px); }margin сдвигает в потоке (влияет на соседей), transform — только визуально. Для мелких подстроек и анимаций лучше transform.
.card { position: relative; }
.card .price {
position: absolute;
right: 16px;
top: 16px;
}Размещает элемент в правом углу относительно родителя. Родителю обязательно нужно position: relative.
Практика: три задачи
- Кнопка «Войти» в шапке —
margin-left: autoв flex-строке. - Цена в карточке —
text-align: right. - Бейдж «Хит» в правом углу —
position: absolute; right; top.
Частые ошибки: причина → решение
| Симптом | Причина | Решение |
|---|---|---|
| margin-left: auto не работает | родитель не flex | задать display: flex |
| Элемент за краем | большой сдвиг | использовать flex/absolute |
| Появилась прокрутка | transform выводит за границу | уменьшить сдвиг или overflow |
| absolute уехал не туда | нет relative у родителя | задать позиционирование |
Проверьте себя
Вопросы и ответы
margin меняет раскладку и сдвигает соседей, transform двигает только визуально, не влияя на поток.
Задайте margin-left: auto вместе с ограниченной шириной, либо используйте margin-left у блочного элемента.
Элемент вышел за правую границу. Проверьте transform, margin и абсолютное позиционирование, а также ширину родителя.
Обычно текст в кнопке центрируют: display: inline-flex; justify-content: center;. Если нужно именно вправо — justify-content: flex-end.
Итоги
- Текст —
text-align: right. - Прижать к краю —
margin-left: autoво flex. - Мелкий сдвиг —
marginилиtransform. - В угол —
position: absoluteот relative-родителя.
Комментарии
Пока комментариев нет — будьте первым, кто поделится мнением.