javascript - Why Are Calculate and Clear Buttons on Top of Each Other? -
the 2 buttons, calculate , clear, on top of each other instead of next each other. basic calculator application (the solution appears in light green textbox after user hits "calculate"). calculate , clear buttons both inside of div tag. 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>
if put them in 2 separate div tags, on 2 separate rows instead of side side. not sure i've done wrong. in advance help. here css:
input { margin-left: -5em; margin-bottom: .5em; } 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: 11em; } input.nolabel { margin-left:11em; background-color: beige; color: blue; }
and div {margin-left:8em;} div {margin-left:7.5em;} in css:
this cause
input { margin-left: -5em; margin-bottom: .5em; }
change
input:not([type='button']) { margin-left: -5em; margin-bottom: .5em; }
Comments
Post a Comment