+ 3

can anyone help with my codes? I cant align the search button...

HTML CODE <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="style.css"> <script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script> <title>Awesome Search Box</title> </head> <body> <div class="search-box"></div> <input class="search-txt" type="text" name="" placeholder="Type to search"> <a class="search-btn" href="#"></a> <i class="fas fa-search"></i> </body> </html> CSS CODE body { margin: 0; padding: 0; background: #e84118; } .search-txt{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background:#2f3640; height: 40px; border-radius: 40px; padding: 10px; } .search-button{ position: absolute; color: #e84118; float: right; width: 40px; border-radius: 50%; background: #2f3640; display: flex; justify-content: center; align-items: center; }

html css button align search

11th Jul 2019, 9:38 AM

YCP

4 Réponses

+ 4

1). You didn't use <form> tag. 2). For creating a search box you need to use type="search"and a button. Example:- <input type="search" class="search_button"> <input type="submit" class="submit-button"> 3). You have given the position absolute but haven't mentioned top, left, bottom or right in the css for button's class that is search-button. You can also use margin for aligning your button. Visit w3schools.com, it is good website for html and css and you will find almost everything there.

12th Jul 2019, 5:23 AM

Chetali Shah

+ 2

Put the search button in a <center>

12th Jul 2019, 11:32 AM

Coder X

+ 1

I just realised I made a lot of mistakes😂😂 how to actually use <form> tag? Can you give a little bit more explanation on that? Thank you!!

12th Jul 2019, 8:12 AM

YCP

+ 1

<form> tag basically is used to create a form to take input from users which can be through text field or text area or radio button or checkbox etc. <form> <input type="search" class="search-button"> <input type="submit" class="submit-button"> </form> This creates a form which contains a search box(kind of a text field) along with a button to search. To know more about <form> tag and its elements visit: https://www.w3schools.com/html/html_forms.asp To know about input type search visit: https://www.w3schools.com/tags/att_input_type_search.asp

12th Jul 2019, 10:07 AM

Chetali Shah