Как выровнять кнопку справа
Как можно передвинуть красную кнопку так что бы было как на фото? Ссылка на 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
эту кнопку ---------->Отслеживать
@Vasily на карточках слева есть красная кнопка. Но я я хочу ее передвинуть вправо , что бы было как на фотографии (образец). По идее эта кнопка должна удалять картинку , но почему то не удаляет (хотя скрипт удаления вроде прописал)
– user389240
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
Helloooo Вариант с вашим кодом:
Я задал 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 Вход
На сайте с 04.05.2008
15 ноября 2013, 20:01
top и left в пикселях указать а не в процентах?
Предлагаю воспользоваться моими услугами корректора. Проверю и уберу все ошибки, поправлю грамматику и склонения, сделаю текст лучше и читабельнее. Высокая скорость работы, цена 20 р за 1000 символов.
Как выровнять кнопку по правому краю в html?
Вариант 1 — float: right; .
Ответ написан более трёх лет назад
Ankhena @Ankhena Куратор тега CSS
1. Родителю text-align: right
и еще пачка других возможностей
Как выровнять кнопки в форме вправо?
В 1С Предприятии 8.2 внешний вид формы определяется расположением и свойствами элементов в дереве элементов формы.
На основе этих свойств система сама «рисует» форму. Однако, у разработчика есть несколько способов существенно вмешаться в этот процесс и повысить удобочитаемость формы:
группы элементов формы (свойство Группировка и др.);
размеры элементов;
ширина подчиненных элементов.
Например, нам нужно расположить горизонтально несколько кнопок прижатыми к правому краю формы.
Для этого создадим в форме новую группу типа Командная панель . И в свойстве ГоризонтальноеПоложение укажем Право .
Затем перетащим в эту группу несколько команд из окна команд формы. В результате в нашей группе будут созданы кнопки, соответствующие этим командам.
Итак, мы получили желаемый результат расположения кнопок в форме.
