Задать вопрос
@OwerFan

Как задать расположение кнопки?

Здравствуйте! Подскажите, пожалуйста, что нужно написать, чтобы кнопка "Сохранить изменения" отображалась не слева а справа в форме?
<!DOCTYPE html>
<html>
<head>
    <title>Авторизация и регистрация</title>
    <link rel="stylesheet" href="style.css">


</head>
<body>
<form action="" class="form">
    <h1 class="form_title">Редактирование</h1>
    <div class="form_group">
        <input type="text" class="form_input" placeholder=" ">
        <label for="" class="form_label">Email</label>
    </div>
    <div class="form_group">
        <input type="text" class="form_input" placeholder=" ">
        <label for="" class="form_label">Пароль</label>
    </div>
    <button class="form_button">Сохранить изменения</button>
</form>



<script src="my.js"></script>
</body>
</html>

body{
	display:flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
}
.form{
	width: 300px;
	padding: 32px;
	border-radius: 10px;
	box-shadow: 0 4px 16px #ccc;
	font-family: sans-serif;
	letter-spacing: 1px;
	position: absolute;
}
.form_input,
.form_button{
	font-family: sans-serif;
	letter-spacing: 1px;
	font-size: 16px;
}
.form_title{
	text-align: center;
	margin:0 0 42px 0;
	font-weight: normal;
	caret-color: transparent;
}
.form_group{
	position: relative;
	margin-bottom: 32px;
}
.form_label{
	position: absolute;
	top:0;
	z-index: -1;
	color: #9e9e9e;
	transition: 0.3s;
}
.form_input {
	width: 100%;
	padding: 10px;
	border: none;
	border-bottom: 1px solid #e0e0e0;
	background-color: transparent;
	outline: none;
	transition: 0.3s;

}
.form_input:focus{
	border-bottom: 1px solid #1a73a8;
}
.form_button{
	padding: 10px 20px;
	border: none;
	border-radius: 5px;
	color: white;
	background-color: #0071f0;
	outline: none;
	cursor: pointer;
	transition: 0.3s;
	caret-color: transparent;
}
.form_button:focus,
.form_button:hover{
	background-color: rgba(0,113,240,0.7);
}

.form_label{
	top: -18px;
	font-size:12px;
}

https://codepen.io/pen/
  • Вопрос задан
  • 2257 просмотров
Подписаться 1 Простой Комментировать
Решения вопроса 1
approximate_solution
@approximate_solution
JS Developer. Angular\React\Vue\Ember
Для .form-button

display: block;
margin-left: auto;

60a75f0c83ead722155943.png
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы