search form what is wrong for her

Question

I need a magnifying glass to be on the right side. Initially, everything was in place, and now it has collapsed. I can not find the error.

*{ 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> = "https://use.fontawesome.com/releases/v5.0.8/css/fontawesome.css" integrity = "sha384-q3jl8XQu1OpdLgGFvNRnPdj5VIlCvgsDQTQB6owSOHWlAurxul7f + JpUOVdAiJ5P" crossorigin = "anonymous"> <!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>

My recommendation чтоб ошибок на начальном этапе было меньше - комментируйте каждый шаг (каждый!!!). you is that чтоб ошибок на начальном этапе было меньше - комментируйте каждый шаг (каждый!!!).
Yes, this is probably unnecessary work, but these actions will relieve you of such situations and introduce understanding into your code, both from your side and from other developers (all the same, if you minify, comments will be removed).
The same story with the JS, but there except comments, I recommend checking everything through console.log();
can through the debugger after all and not through console.log();

E_K E_K 3,505 3 9 26 · Answer 1 · 2018-03-27T23:51:03

You can add the float: right property to the icon or do the same, but on flex.

 *{ margin: 0; padding: 0; } /*Icon wrapper*/ .icon-wrap { float: right; } 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 . . ."> <span class="icon-wrap"><i class="fa fa-search" aria-hidden="true"></i></span> </div> </form> </div> </div> </body> = "https://use.fontawesome.com/releases/v5.0.8/css/fontawesome.css" integrity = "sha384-q3jl8XQu1OpdLgGFvNRnPdj5VIlCvgsDQTQB6owSOHWlAurxul7f + JpUOVdAiJ5P" crossorigin = "anonymous"> <!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 . . ."> <span class="icon-wrap"><i class="fa fa-search" aria-hidden="true"></i></span> </div> </form> </div> </div> </body>

search form what is wrong for her

1 answer 1

More articles: