javascript - Why Are Calculate and Clear Buttons on Top of Each Other? -


enter image description here

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; } 

enter image description here

enter image description here

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

Popular posts from this blog

resizing Telegram inline keyboard -

command line - How can a Python program background itself? -

php - "cURL error 28: Resolving timed out" on Wordpress on Azure App Service on Linux -