When you create a web form, you’ll probably need to know how to align labels with inputs. Here, we’ll show how it’s possible to create right-aligned and left-aligned <label> elements next to inputs.
In our example below, we use three <div> elements and place <label> and <input> elements within each of them. Note that we use a type attribute for each <input>. We specify the margin-bottom of our <div> element. Then, we set the display of the <label> element to "inline-block" and give a fixed width. After that, set the text-align property to "right", and the labels will be aligned with the inputs on the right side.
- Code HTML
<!DOCTYPE html> <html> <head> <title>How to Align Labels Next to Inputs</title> <link rel="stylesheet" type="text/css" href="css/style.css"> </head> <body> <div class="blog"> <form action="/form/submit" method="post"> <div> <label>Name</label> <input type="text" /> </div> <div> <label>Email</label> <input type="email" /> </div> </form> </div> </body> </html> - Code Css
div { margin-bottom: 10px; } label { display: inline-block; width: 150px; text-align: right; }
