Мне нужно ,чтобы лупа была по правому боку. Первоначально все стояло на месте, а теперь развалилось. Ошибку найти не могу.
*{
margin: 0;
padding: 0;
}
form {
position: relative;
margin: 0 auto;
}
.search {
width: 675px; /* Ширина поля с кнопкой */
border: 1px solid #8d9e7a; /* Параметры рамки */
border-radius: 5px;
min-height: 20px; /* Минимальная высота */
padding: 18px 30px 17px;
margin: 50px auto;
box-shadow: 0 3px 3px #9ea792;
}
}
input[type="search"] {
font-family: "Roboto";
font-size: 3.36пт;
line-height: 7.2пт;
color: #90a4ae;
border: none; /* Убираем рамку */
outline: none; /* Убираем свечение в Chrome и Safari */
-webkit-appearance: none; /* Убираем рамку в Chrome и Safari */
vertical-align: middle; /* Выравнивание по середине */
}
input [type="submit"] {
color: #9aa38c;
position: absolute;
right: 20px;
top: 20px;
font-size: 22px;
cursor: pointer;
width: 20px; /* Ширина кнопки */
height: 20px; /* Высота кнопки */
border: none; /* Убираем рамку */
font-family: FontAwesome;*/
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,700" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.8/css/solid.css" integrity="sha384-v2Tw72dyUXeU3y4aM2Y0tBJQkGfplr39mxZqlTBDUZAb9BGoC40+rdFCG0m10lXk" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.8/css/fontawesome.css" integrity="sha384-q3jl8XQu1OpdLgGFvNRnPdj5VIlCvgsDQTQB6owSOHWlAurxul7f+JpUOVdAiJ5P" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="wrapper">
<div class="container">
<form>
<div class="search">
<input type="search" placeholder = "Search Your Keywords . . .">
<i class="fa fa-search" aria-hidden="true"></i>
</div>
</form>
</div>
</div>
</body>
чтоб ошибок на начальном этапе было меньше - комментируйте каждый шаг (каждый!!!).
Да это возможно лишняя работа, но эти действия избавят вас от подобных ситуаций и внесут понимание в ваш код, как с вашей стороны, так и других разработчиков (все равно при минификации комментарии все уберутся). Та же история с JS, но там кроме комментариев рекомендую проверять все черезconsole.log();
.console.log();
?