Как расположить кнопку справа css

Как выровнять кнопку справа

Как можно передвинуть красную кнопку так что бы было как на фото? Ссылка на CodePen

.element-grid__element < display: flex; flex-direction: column; margin: 0; padding: 0; list-style-type: none; border-radius: 10px; overflow: hidden; max-width: 282px; >.element-grid__like-button < background-image: url(../../../images/like-pic.svg); padding: 0; margin-top: 6px; width: 21px; height: 20px; background-color: white; outline: none; border: none; background-repeat: no-repeat; background-position: center; cursor: pointer; z-index: 2; >.element-grid__like-button:hover < opacity: 0.8; transition: all 1s ease-in; >.element-grid__photo < width: 282px; height: 282px; margin: 0; padding: 0; >.element-grid__text < font-family: 'Inter', ‘Arial’, sans-serif; font-style: normal; font-weight: 900; font-size: 24px; line-height: 29px; color: black; padding: 0; margin: 0; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; max-width: 88%; >.element-grid__text-container < margin: 0; background: #FFFFFF; display: flex; justify-content: space-between; padding: 25px 19px 31px; align-items: center; >.element-grid < margin: 0; padding: 0; display: grid; grid-gap: 20px 18px; grid-template-columns: repeat(auto-fit, 282px); justify-content: center; >.popup-add < display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.5); width: 100%; height: 100%; >.popup-add__container < display: flex; flex-direction: column; justify-content: center; align-items: center; background: #FFFFFF; box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.15); border-radius: 10px; max-width: 430px; position: relative; top: 50%; left: 50%; transform: translate(-50%, -50%); >.popup-add__close < border: none; padding: 0; position: absolute; cursor: pointer; background: url(../images/сlose-icon.svg) no-repeat center; width: 40.7px; height: 40.7px; right: -40.7px; top: -40.7px; >.popup-add__close:hover < opacity: 0.6; transition: all .1s ease-in; >.popup-add__title < font-weight: 900; font-family: 'Inter', ‘Arial’, sans-serif; font-size: 24px; line-height: 29px; color: black; width: 358px; margin: auto; padding-top: 34px; >@media screen and (max-width: 550px) < .popup-add__title < max-width: 230px; font-size: 16px; line-height: 20px; >> .popup-add__input < border: none; margin: 29.74px auto 0; padding-bottom: 13.3px; border-bottom: 1px solid rgba(0, 0, 0, 0.2); width: 358px; font-size: 14px; line-height: 17px; outline: none; color: #C4C4C4; >.popup-add__input:nth-of-type(1) < margin-top: 54px; >.popup-add__input:active < outline: 2px solid blue >@media screen and (max-width:750px) < .popup-add__input < width: auto; >> .popup-add__save-button < font-family: 'Inter', ‘Arial’, sans-serif; background: black; border: none; border-radius: 2px; height: 50.15px; width: 358px; margin: auto; color: white; margin: 48px auto 36.5px; cursor: pointer; >.popup-add__save-button:hover < background: rgba(0, 0, 0, 0.8); transition: all .1s ease-in; >@media screen and (max-width: 550px) < .popup-add__save-button < width: 200px; height: 35px; >> .popup-add_active < display: block; >.element-grid__like-button_active < background-image: url(../images/likepic.PNG); >.element-grid__delite-button < width: 20px; height: 20px; z-index: 4; /*position:absolute;*/ top: 0; right: 0; background-color: red; >.elements < max-width: 882px; margin: 76px auto 0; padding: 0; >.123a

эту кнопку ---------->Новое Место

Отслеживать
11.5k 4 4 золотых знака 22 22 серебряных знака 38 38 бронзовых знаков
задан 27 июл 2020 в 15:32
user389240 user389240

@Vasily на карточках слева есть красная кнопка. Но я я хочу ее передвинуть вправо , что бы было как на фотографии (образец). По идее эта кнопка должна удалять картинку , но почему то не удаляет (хотя скрипт удаления вроде прописал)

– user389240
27 июл 2020 в 16:05

3 ответа 3

Сортировка: Сброс на вариант по умолчанию

Задайте position: relative родительскому блоку, внутри него сделайте элемент, которому зададите position: absolute , тогда вы сможет манипулировать расположением absolute элемента с помощью css-свойств top , left , right , bottom

*, *::before, *::after < box-sizing: border-box; margin: 0; padding: 0; >img < display: block; max-width: 100%; >.card < width: 100vw; height: 100vh; margin: 0 auto; position: relative; >.card img < object-fit: cover; position: absolute; height: 100%; width: 100%; z-index: -1; >button < --white: rgba(255, 255, 255, 1); --black: rgba(0, 0, 0, 1); outline: none; border: 1px solid var(--white); background-color: var(--black); padding: 5px 10px; font-size: 5vw; cursor: pointer; color: var(--white); transition: border-color 0.2s linear, background-color 0.2s linear, color 0.2s linear; >button:hover < color: var(--black); border-color: var(--black); background-color: var(--white); >.card button

Вариант с вашим кодом:

Я задал position: relative для .element-grid__element, position: absolute задал для .element-grid__delite-button

document.addEventListener("DOMContentLoaded", function() < let popupAdd = document.querySelector(".popup-add") let popupAddEditForm = document.querySelector(".profile__add-button") let popupAddClose = document.querySelector(".popup-add__close") let popupLoad = document.querySelector(".popup-add__save-button") popupLoad.addEventListener("click", function(e) < e.preventDefault() addSubmitHandler() >) function toggleAddPopup() < popupAdd.classList.toggle("popup-add_active") >function addForm() < toggleAddPopup() >popupAddEditForm.addEventListener("click", addForm) popupAddClose.addEventListener("click", toggleAddPopup) const initialCards = [< name: "Архыз", link: "https://pictures.s3.yandex.net/frontend-developer/cards-compressed/arkhyz.jpg" >, < name: "Челябинская область", link: "https://pictures.s3.yandex.net/frontend-developer/cards-compressed/chelyabinsk-oblast.jpg" >, < name: "Иваново", link: "https://pictures.s3.yandex.net/frontend-developer/cards-compressed/ivanovo.jpg" >, < name: "Камчатка", link: "https://pictures.s3.yandex.net/frontend-developer/cards-compressed/kamchatka.jpg" >, < name: "Холмогорский район", link: "https://pictures.s3.yandex.net/frontend-developer/cards-compressed/kholmogorsky-rayon.jpg" >, < name: "Байкал", link: "https://pictures.s3.yandex.net/frontend-developer/cards-compressed/baikal.jpg" >] const toggleLikeButton = (e) => < e.target.classList.toggle("element-grid__like-button_active") >const addPhotoElement = (caption, imageLink) => < const elementTemplate = document.querySelector("#photo-elements-template").content const photoElement = elementTemplate.cloneNode(true) photoElement.querySelector(".element-grid__photo").src = imageLink photoElement.querySelector(".element-grid__text").textContent = caption const photoElementsList = document.querySelector(".element-grid") photoElementsList.prepend(photoElement) document.querySelector(".element-grid__like-button").addEventListener("click", toggleLikeButton) >const addCards = (array) => < array.forEach((item) =>< addPhotoElement(item.name, item.link) >) > addCards(initialCards) const addSubmitHandler = (e) => < const newPhotoElementName = document.getElementById("name").value const newPhotoElementLink = document.getElementById("link").value addPhotoElement(newPhotoElementName, newPhotoElementLink) toggleAddPopup() >>) const deleteCard = (e) =>

.profile__add-button < display: none; >.element-grid__delite-button < float: right; width: 20px; height: 20px; background-color: red; >.element-grid__element < display: flex; flex-direction: column; margin: 0; padding: 0; list-style-type: none; border-radius: 10px; overflow: hidden; max-width: 282px; position: relative; >.element-grid__like-button < background-image: url(../../../images/like-pic.svg); padding: 0; margin-top: 6px; width: 21px; height: 20px; background-color: white; outline: none; border: none; background-repeat: no-repeat; background-position: center; cursor: pointer; z-index: 2; >.element-grid__like-button:hover < opacity: 0.8; transition: all 1s ease-in; >.element-grid__photo < width: 282px; height: 282px; margin: 0; padding: 0; >.element-grid__text < font-family: 'Inter', ‘Arial’, sans-serif; font-style: normal; font-weight: 900; font-size: 24px; line-height: 29px; color: black; padding: 0; margin: 0; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; max-width: 88%; >.element-grid__text-container < margin: 0; background: #FFFFFF; display: flex; justify-content: space-between; padding: 25px 19px 31px; align-items: center; >.element-grid < margin: 0; padding: 0; display: grid; grid-gap: 20px 18px; grid-template-columns: repeat(auto-fit, 282px); justify-content: center; >.popup-add < display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.5); width: 100%; height: 100%; >.popup-add__container < display: flex; flex-direction: column; justify-content: center; align-items: center; background: #FFFFFF; box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.15); border-radius: 10px; max-width: 430px; position: relative; top: 50%; left: 50%; transform: translate(-50%, -50%); >.popup-add__close < border: none; padding: 0; position: absolute; cursor: pointer; background: url(../images/сlose-icon.svg) no-repeat center; width: 40.7px; height: 40.7px; right: -40.7px; top: -40.7px; >.popup-add__close:hover < opacity: 0.6; transition: all .1s ease-in; >.popup-add__title < font-weight: 900; font-family: 'Inter', ‘Arial’, sans-serif; font-size: 24px; line-height: 29px; color: black; width: 358px; margin: auto; padding-top: 34px; >@media screen and (max-width: 550px) < .popup-add__title < max-width: 230px; font-size: 16px; line-height: 20px; >> .popup-add__input < border: none; margin: 29.74px auto 0; padding-bottom: 13.3px; border-bottom: 1px solid rgba(0, 0, 0, 0.2); width: 358px; font-size: 14px; line-height: 17px; outline: none; color: #C4C4C4; >.popup-add__input:nth-of-type(1) < margin-top: 54px; >.popup-add__input:active < outline: 2px solid blue >@media screen and (max-width:750px) < .popup-add__input < width: auto; >> .popup-add__save-button < font-family: 'Inter', ‘Arial’, sans-serif; background: black; border: none; border-radius: 2px; height: 50.15px; width: 358px; margin: auto; color: white; margin: 48px auto 36.5px; cursor: pointer; >.popup-add__save-button:hover < background: rgba(0, 0, 0, 0.8); transition: all .1s ease-in; >@media screen and (max-width: 550px) < .popup-add__save-button < width: 200px; height: 35px; >> .popup-add_active < display: block; >.element-grid__like-button_active < background-image: url(../images/likepic.PNG); >.element-grid__delite-button < width: 20px; height: 20px; z-index: 4; position:absolute; top: 10px; right: 10px; background-color: red; >.elements

Новое Место

Как расположить кнопку в опр точке html

Как расположить кнопку в определенной точки. Что бы она не меняла свое положение, даже при разных разрешениях экрана?

 
  
  
Dosuga.COM 
  
 
BODY < 
background-image: url('ссылка на изображение'); 
background-attachment:fixed; 
height:100%; 
background-repeat:no-repeat; 
background-position:center; 
>

На сайте с 04.05.2008

15 ноября 2013, 20:01

top и left в пикселях указать а не в процентах?

Предлагаю воспользоваться моими услугами корректора. Проверю и уберу все ошибки, поправлю грамматику и склонения, сделаю текст лучше и читабельнее. Высокая скорость работы, цена 20 р за 1000 символов.

Как выровнять кнопку по правому краю в html?

Seasle

Вариант 1 — float: right; .
Вариант 2 — flex.
Вариант 3 — grid.
Вариант 4 — position: absolute/fixed .

Ответ написан более трёх лет назад
Комментировать
Нравится 2 Комментировать

Ankhena

Ankhena @Ankhena Куратор тега CSS
Нежно люблю верстку

1. Родителю text-align: right
2. Родителю flex
— margin-left: auto кнопке
— justify-content: flex-end родителю
3. Абсолют кнопке

и еще пачка других возможностей

Как выровнять кнопки в форме вправо?

В 1С Предприятии 8.2 внешний вид формы определяется расположением и свойствами элементов в дереве элементов формы.

На основе этих свойств система сама «рисует» форму. Однако, у разработчика есть несколько способов существенно вмешаться в этот процесс и повысить удобочитаемость формы: