html - How to Get Labels to Line Up -
i'm done calculator application. last thing have 2 labels ("first number:" , "second number:") line perfectly. move "first number:" right little bit colon : lines colon below it. i've tried assigning label class , moving right in css, moving textbox right well. here full html:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>calculator</title> <link rel="stylesheet" href="styles.css"> <script src="calculator.js"></script> </head> <body> <section> <h1>calculator</h1> <label> </label> <input class="nolabel" type="text" id="sum" disabled="disabled"> <br> <label>first number:</label> <input type="text" id="firstnumber"> <br> <label>second number:</label> <input type="text" id="secondnumber"> <br> <div> <input type="button" id="calc" value="calculate"> <input type="button" id="clear" value="clear"> </div> </section> </body> </html>
and css:
input:not([type="button"]) { margin-left: -5em; margin-bottom: .5em; } input.nolabel { margin-left:11em; background-color: beige; color: blue; } label { width: 11em; float:left; } h1 { color:black; text-align:center; } section { padding: 0 2em 1em; border: grey solid; background-color: #dcdcdc; width: 350px; } div { margin-left: 7.5em; }
as always, help!
the result:
i have modified code replicate expected output label. need use text-align: right
on labels width greater label text text lined @ extreme right end.
but recommend using layout: forms horizontal better , manageable edit.
input:not([type="button"]) { margin-bottom: 0.5em; margin-left: 0.6em; /* modified */ } input.nolabel { margin-left: 11em; background-color: beige; color: blue; } label { float: left; text-align: right; /* added */ width: 140px; /* modified */ } h1 { color: black; text-align: center; } section { padding: 0 2em 1em; border: grey solid; background-color: #dcdcdc; width: 350px; } div { margin-left: 7.5em; }
<!doctype html> <html> <head> <meta charset="utf-8"> <title>calculator</title> <link rel="stylesheet" href="styles.css"> <script src="calculator.js"></script> </head> <body> <section> <h1>calculator</h1> <label></label> <input class="nolabel" type="text" id="sum" disabled="disabled"> <br> <label>first number:</label> <input type="text" id="firstnumber"> <br> <label>second number:</label> <input type="text" id="secondnumber"> <br> <div> <input type="button" id="calc" value="calculate"> <input type="button" id="clear" value="clear"> </div> </section> </body> </html>
Comments
Post a Comment