Margin can't position button 和 textarea

Question

需要将注释按钮移到与文本一致的位置（作者：Aleksa Kovacevic）我尝试 margine-left 但不知道为什么不工作。我需要将 textarea(result) 移到顶部但 margine(margin-bottom: 600px;) 不起作用。我不知道为什么我的 textarea 很粘 form.Every 答案会帮助我。

function  Git(){
   window.open("https://github.com/thelexa");

}
function myFunction() {
  var x = document.getElementById("Cal");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}

function runLB(){
  document.case.display.value += "("
}
function runRB(){
  document.case.display.value += ")"
}
function run1(){
 document.case.display.value += "1"
};
function run2(){
 document.case.display.value += "2"
};
function run3(){
 document.case.display.value += "3"
};
function run4(){
 document.case.display.value += "4"
};
function run5(){
 document.case.display.value += "5"
};

function run6(){
    document.case.display.value += "6"
};
function run7(){
 document.case.display.value += "7"
};
function run8(){
 document.case.display.value += "8"
};
function run9(){
 document.case.display.value += "9"
};
function run0(){
 document.case.display.value += "0"
};
function runPlus(){
 document.case.display.value += "+"
};
function runMinus(){
 document.case.display.value += "-"
};
function runDivide(){
 document.case.display.value += "/"
};
function runMultiply(){
    document.case.display.value += "*"
};
function runComma(){
 document.case.display.value += "."
};
function runBack(){
 var val = document.case.display.value.slice(0, -1);
    document.case.display.value = val;
};
function runC(){
 document.case.display.value = ""
};
function runEquals() {
        if (document.case.display.value == "") {
         document.case.display.value = ""
        } else  {
 var equals = eval(document.case.display.value)
 document.case.display.value = equals;
}
}

function clickCounter() {
  if (typeof(Storage) !== "undefined") {
    if (sessionStorage.clickcount) {
      sessionStorage.clickcount = Number(sessionStorage.clickcount)+1;
    } else {
      sessionStorage.clickcount = 1;
    }
    document.getElementById("result").innerHTML = "You have clicked the button " + sessionStorage.clickcount + " time(s) in this session.";
  } else {
    document.getElementById("result").innerHTML = "Sorry, your browser does not support web storage";
  }
}

html {
background:
 linear-gradient(rgba(196, 102, 0, 0.6), rgba(155, 89, 182, 0.6));
}
ul {
 list-style: none;
}
body {
 width: 500px;

}
#Git{
  position: absolute;
  color: #fff;
  background: rgba(155, 89, 182, 0.6);
  left: 94.5%;
  font-size: 20px;
  border-radius: 30px;
  width: 100px;
  height: 60px;
  font-family: sans-serif;
  text-decoration: none;
  box-sizing: border-box;
  background-size: 400%;

}
#His {
 transform: translate(-50%, -50%);
 width: 200px;
 height: 60px;
 line-height: 60px;
 color: #fff;
 font-size: 24px;
 text-transform: uppercase;
 text-decoration: none;
 font-family: sans-serif;
 box-sizing: border-box;
 background:linear-gradient(rgba(196, 102, 0, 0.9), rgba(155, 89, 182, 0.9));
 background-size: 400%;
 border-radius: 30px;
 z-index: 1;
}
#His:hover
{
 animation: animate 5s linear infinite;
}
@keyframes animate
{
 0%
 {
  background-position: 0%;
 }
 100%
 {
  background-position: 500%;
 }
}
#His:before
{
 content: '';
 position: absolute;
 top: -5px;
 left: -5px;
 right: -5px;
 bottom: -5px;
 z-index: -1;
 background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
 background-size: 400%;
 border-radius: 40px;
 opacity: 0;
 transition: 0.5s;
}
#His:hover:before
{
 filter: blur(20px);
 opacity:1;
 animation: animate 5s linear infinite;
}
{}

form {
 background:linear-gradient(rgba(196, 102, 0, 0.6), rgba(155, 89, 182, 0.6));
 text-align: center;
 padding: 7px;
 align-content: center;
 border-radius: 10px;
    border: 5px solid rgba(196, 102, 0, 0.6);

}
#display {
 width: 98%;
 height: 50px;
 text-align: right;
 font-size: 3rem;
    margin: 7px;
 border: 5px solid rgba(196, 102, 0, 0.9);

}
.digit {
 font-size: 2rem;
 background-color:  #f8f8f8;
 height: 55px;
 width: 20%;
    border: 1px solid #c6c6c6;
 display: inline-block;
 box-shadow: 1px 1px 1px;
 color:#444;
 font-family: Roboto-Regular,helvetica,arial,sans-serif;
 margin: 2px;
 opacity: 0.9;
}
.oper {
 font-size: 2rem;
 background-color: #d6d6d6;
 height: 55px;
 width: 20%;
 color: #444;
 display: inline-block;
 margin: 2px;
 box-shadow: 0 1px 1px;
 font-family: Roboto-Regular,helvetica,arial,sans-serif;
 opacity: 0.9;
}
#equal {
 background-color:rgba(196, 102, 0, 0.6) ;
 color: white;
 width: 41.5%;


}
textarea {
  display: block;
  margin-bottom: 20px;
  resize: none;
  width: 520px;
  height: 400px;
  max-width: 405px;
  max-height: 400px;
  margin-left: 36px;
  margin-top: 20px;
  font-size: 25px;
  border: 3px solid rgba(196, 102, 0, 0.9);

}
#by {
 color: white;
 font-size: 27px;
 margin-right: 200px;
}
#result {
margin-left: 600px;
margin-bottom: 600px;
display:block
}

<html>
<head>
    <title>Calculator Project</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
     <link rel="stylesheet" href="main.css" type="text/css">
        <script src="main.js" type="text/javascript"></script>
</head>

<body>

<button type="button" id="Git" onclick="Git()"> GitHub</button>
<form name="case" >
  <input name="display" id="display" value="">
    <input type="button" class="oper" value="(" onclick="runLB()">
    <input type="button" class="oper" value=")" onclick="runRB()">
    <input type="button" id="back"  class="oper"  value="CE" onclick="runBack()">
   <input type="button" id="divide"  class="oper"  value="÷" onclick="runDivide()" >

    <input type="button" class="digit" value="1" onclick="run1()">
    <input type="button" class="digit" value="2" onclick="run2()">
    <input type="button" class="digit" value="3" onclick="run3()">
    <input type="button" id="multiply"  class="oper"  value="×" onclick="runMultiply()">

    <input type="button" class="digit" value="4" onclick="run4()">
    <input type="button" class="digit" value="5" onclick="run5()">
    <input type="button" class="digit" value="6" onclick="run6()">
    <input type="button" id="minus"  class="oper"  value="-" onclick="runMinus()" >

    <input type="button" class="digit" value="7" onclick="run7()">
    <input type="button" class="digit" value="8" onclick="run8()">
    <input type="button" class="digit" value="9" onclick="run9()">
    <input type="button" id="plus"  class="oper"  value="+"  onclick="runPlus()">

    <input type="button" class="digit" value="0" onclick="run0()">
    <input type="button" id="comma" class="digit" value="." onclick="runComma()">
    <input type="button" id="equal"  class="oper" value="=" onclick="runEquals()">

<div id="Cal">
<textarea   placeholder="Note"></textarea>
</div>
<p id="by">By: Aleksa Kovacevic</p>
<button type="button" id="His" onclick="myFunction()"> Note</button>
</form>

<p><button onclick="clickCounter()" type="button">Click me!</button></p>
<textarea  id="result" placeholder="Note"></textarea>
</body>

这是简单的 Cacluator。抱歉英语不好。

Answer 1

现有代码中需要更改。

参考这个

<body>
<button type="button" id="Git" onclick="Git()"> GitHub</button>
<div class="form">
    <form name="case" >
      <input name="display" id="display" value="">
        <input type="button" class="oper" value="(" onclick="runLB()">
        <input type="button" class="oper" value=")" onclick="runRB()">
        <input type="button" id="back"  class="oper"    value="CE" onclick="runBack()">
       <input type="button" id="divide"     class="oper"    value="÷" onclick="runDivide()" >

        <input type="button" class="digit" value="1" onclick="run1()">
        <input type="button" class="digit" value="2" onclick="run2()">
        <input type="button" class="digit" value="3" onclick="run3()">
        <input type="button" id="multiply"  class="oper"    value="×" onclick="runMultiply()">

        <input type="button" class="digit" value="4" onclick="run4()">
        <input type="button" class="digit" value="5" onclick="run5()">
        <input type="button" class="digit" value="6" onclick="run6()">
        <input type="button" id="minus"     class="oper"    value="-" onclick="runMinus()" >

        <input type="button" class="digit" value="7" onclick="run7()">
        <input type="button" class="digit" value="8" onclick="run8()">
        <input type="button" class="digit" value="9" onclick="run9()">
        <input type="button" id="plus"  class="oper"    value="+"  onclick="runPlus()">

        <input type="button" class="digit" value="0" onclick="run0()">
        <input type="button" id="comma" class="digit" value="." onclick="runComma()">
        <input type="button" id="equal"     class="oper"    value="=" onclick="runEquals()">

    <div id="Cal">
    <textarea   placeholder="Note"></textarea>
    </div>
    <p id="by">By: Aleksa Kovacevic</p>
    <button type="button" id="His" onclick="myFunction()"> Note</button>
    </form>
    <p><button onclick="clickCounter()" type="button">Click me!</button></p>
</div>
<textarea  id="result" placeholder="Note"></textarea>
</body>

CSS

html {
background:
    linear-gradient(rgba(196, 102, 0, 0.6), rgba(155, 89, 182, 0.6));
}
ul {
    list-style: none;
}
body {
    width: 100%;

}
#Git{
  position: absolute;
  color: #fff;
  background: rgba(155, 89, 182, 0.6);
  left: 94.5%;
  font-size: 20px;
  border-radius: 30px;
  width: 100px;
  height: 60px;
  font-family: sans-serif;
  text-decoration: none;
  box-sizing: border-box;
  background-size: 400%;

}
#His {
 transform: translate(-50%, -50%);
 width: 200px;
 height: 60px;
 line-height: 60px;
 color: #fff;
 font-size: 24px;
 text-transform: uppercase;
 text-decoration: none;
 font-family: sans-serif;
 box-sizing: border-box;
 background:linear-gradient(rgba(196, 102, 0, 0.9), rgba(155, 89, 182, 0.9));
 background-size: 400%;
 border-radius: 30px;
 z-index: 1;
}
#His:hover
{
 animation: animate 5s linear infinite;
}
@keyframes animate
{
 0%
 {
  background-position: 0%;
 }
 100%
 {
  background-position: 500%;
 }
}
#His:before
{
 content: '';
 position: absolute;
 top: -5px;
 left: -5px;
 right: -5px;
 bottom: -5px;
 z-index: -1;
 background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
 background-size: 400%;
 border-radius: 40px;
 opacity: 0;
 transition: 0.5s;
}
#His:hover:before
{
 filter: blur(20px);
 opacity:1;
 animation: animate 5s linear infinite;
}
{}

form {
    background:linear-gradient(rgba(196, 102, 0, 0.6), rgba(155, 89, 182, 0.6));
    text-align: center;
    padding: 7px;
    align-content: center;
    border-radius: 10px;
    border: 5px solid rgba(196, 102, 0, 0.6);
}
.form {
    width:35%;
    display: inline-block;
}
#result {
    width: 25%;
    display: inline-block;
}
#display {
    width: 98%;
    height: 50px;
    text-align: right;
    font-size: 3rem;
    margin: 7px;
    border: 5px solid rgba(196, 102, 0, 0.9);

}
.digit {
    font-size: 2rem;
    background-color:   #f8f8f8;
    height: 55px;
    width: 20%;
    border: 1px solid #c6c6c6;
    display: inline-block;
    box-shadow: 1px 1px 1px;
    color:#444;
    font-family: Roboto-Regular,helvetica,arial,sans-serif;
    margin: 2px;
    opacity: 0.9;
}
.oper {
    font-size: 2rem;
    background-color: #d6d6d6;
    height: 55px;
    width: 20%;
    color: #444;
    display: inline-block;
    margin: 2px;
    box-shadow: 0 1px 1px;
    font-family: Roboto-Regular,helvetica,arial,sans-serif;
    opacity: 0.9;
}
#equal {
    background-color:rgba(196, 102, 0, 0.6) ;
    color: white;
    width: 41.5%;


}
textarea {
  display: block;
  margin-bottom: 20px;
  resize: none;
  width: 520px;
  height: 400px;
  max-width: 405px;
  max-height: 400px;
  margin-left: 36px;
  margin-top: 20px;
  font-size: 25px;
  border: 3px solid rgba(196, 102, 0, 0.9);

}
#by {
    color: white;
    font-size: 27px;
    margin-right: 200px;
}

Answer 2

不要使用边距用 div 包裹整个内容，显示 flex 会对齐它们，文本和按钮也是一样的

function  Git(){
   window.open("https://github.com/thelexa");

}
function myFunction() {
  var x = document.getElementById("Cal");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}

function runLB(){
  document.case.display.value += "("
}
function runRB(){
  document.case.display.value += ")"
}
function run1(){
 document.case.display.value += "1"
};
function run2(){
 document.case.display.value += "2"
};
function run3(){
 document.case.display.value += "3"
};
function run4(){
 document.case.display.value += "4"
};
function run5(){
 document.case.display.value += "5"
};

function run6(){
    document.case.display.value += "6"
};
function run7(){
 document.case.display.value += "7"
};
function run8(){
 document.case.display.value += "8"
};
function run9(){
 document.case.display.value += "9"
};
function run0(){
 document.case.display.value += "0"
};
function runPlus(){
 document.case.display.value += "+"
};
function runMinus(){
 document.case.display.value += "-"
};
function runDivide(){
 document.case.display.value += "/"
};
function runMultiply(){
    document.case.display.value += "*"
};
function runComma(){
 document.case.display.value += "."
};
function runBack(){
 var val = document.case.display.value.slice(0, -1);
    document.case.display.value = val;
};
function runC(){
 document.case.display.value = ""
};
function runEquals() {
        if (document.case.display.value == "") {
         document.case.display.value = ""
        } else  {
 var equals = eval(document.case.display.value)
 document.case.display.value = equals;
}
}

function clickCounter() {
  if (typeof(Storage) !== "undefined") {
    if (sessionStorage.clickcount) {
      sessionStorage.clickcount = Number(sessionStorage.clickcount)+1;
    } else {
      sessionStorage.clickcount = 1;
    }
    document.getElementById("result").innerHTML = "You have clicked the button " + sessionStorage.clickcount + " time(s) in this session.";
  } else {
    document.getElementById("result").innerHTML = "Sorry, your browser does not support web storage";
  }
}

#wrapper{display:flex;}
#newpos{display:flex;}

html {
background:
 linear-gradient(rgba(196, 102, 0, 0.6), rgba(155, 89, 182, 0.6));
}
ul {
 list-style: none;
}
body {
 width: 500px;

}
#Git{
  position: absolute;
  color: #fff;
  background: rgba(155, 89, 182, 0.6);
  left: 94.5%;
  font-size: 20px;
  border-radius: 30px;
  width: 100px;
  height: 60px;
  font-family: sans-serif;
  text-decoration: none;
  box-sizing: border-box;
  background-size: 400%;

}
#His {
 transform: translate(0,50%);
 width: 200px;
 height: 60px;
 line-height: 60px;
 color: #fff;
 font-size: 24px;
 text-transform: uppercase;
 text-decoration: none;
 font-family: sans-serif;
 box-sizing: border-box;
 background:linear-gradient(rgba(196, 102, 0, 0.9), rgba(155, 89, 182, 0.9));
 background-size: 400%;
 border-radius: 30px;
 z-index: 1;
}
#His:hover
{
 animation: animate 5s linear infinite;
}
@keyframes animate
{
 0%
 {
  background-position: 0%;
 }
 100%
 {
  background-position: 500%;
 }
}
#His:before
{
 content: '';
 position: absolute;
 top: -5px;
 left: -5px;
 right: -5px;
 bottom: -5px;
 z-index: -1;
 background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
 background-size: 400%;
 border-radius: 40px;
 opacity: 0;
 transition: 0.5s;
}
#His:hover:before
{
 filter: blur(20px);
 opacity:1;
 animation: animate 5s linear infinite;
}
{}

form {
 background:linear-gradient(rgba(196, 102, 0, 0.6), rgba(155, 89, 182, 0.6));
 text-align: center;
 padding: 7px;
 align-content: center;
 border-radius: 10px;
    border: 5px solid rgba(196, 102, 0, 0.6);

}
#display {
 width: 98%;
 height: 50px;
 text-align: right;
 font-size: 3rem;
    margin: 7px;
 border: 5px solid rgba(196, 102, 0, 0.9);

}
.digit {
 font-size: 2rem;
 background-color:  #f8f8f8;
 height: 55px;
 width: 20%;
    border: 1px solid #c6c6c6;
 display: inline-block;
 box-shadow: 1px 1px 1px;
 color:#444;
 font-family: Roboto-Regular,helvetica,arial,sans-serif;
 margin: 2px;
 opacity: 0.9;
}
.oper {
 font-size: 2rem;
 background-color: #d6d6d6;
 height: 55px;
 width: 20%;
 color: #444;
 display: inline-block;
 margin: 2px;
 box-shadow: 0 1px 1px;
 font-family: Roboto-Regular,helvetica,arial,sans-serif;
 opacity: 0.9;
}
#equal {
 background-color:rgba(196, 102, 0, 0.6) ;
 color: white;
 width: 41.5%;


}
textarea {
  display: block;
  margin-bottom: 20px;
  resize: none;
  width: 520px;
  height: 400px;
  max-width: 405px;
  max-height: 400px;

  margin-top: 20px;
  font-size: 25px;
  border: 3px solid rgba(196, 102, 0, 0.9);

}
#by {
text-align:left;
 color: white;
 font-size: 27px;

}
#result {

display:block
}

<html>
<head>
    <title>Calculator Project</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
     <link rel="stylesheet" href="main.css" type="text/css">
        <script src="main.js" type="text/javascript"></script>
</head>

<body>


<button type="button" id="Git" onclick="Git()"> GitHub</button>
<div id="wrapper">
<form name="case" >
  <input name="display" id="display" value="">
    <input type="button" class="oper" value="(" onclick="runLB()">
    <input type="button" class="oper" value=")" onclick="runRB()">
    <input type="button" id="back"  class="oper"  value="CE" onclick="runBack()">
   <input type="button" id="divide"  class="oper"  value="÷" onclick="runDivide()" >

    <input type="button" class="digit" value="1" onclick="run1()">
    <input type="button" class="digit" value="2" onclick="run2()">
    <input type="button" class="digit" value="3" onclick="run3()">
    <input type="button" id="multiply"  class="oper"  value="×" onclick="runMultiply()">

    <input type="button" class="digit" value="4" onclick="run4()">
    <input type="button" class="digit" value="5" onclick="run5()">
    <input type="button" class="digit" value="6" onclick="run6()">
    <input type="button" id="minus"  class="oper"  value="-" onclick="runMinus()" >

    <input type="button" class="digit" value="7" onclick="run7()">
    <input type="button" class="digit" value="8" onclick="run8()">
    <input type="button" class="digit" value="9" onclick="run9()">
    <input type="button" id="plus"  class="oper"  value="+"  onclick="runPlus()">

    <input type="button" class="digit" value="0" onclick="run0()">
    <input type="button" id="comma" class="digit" value="." onclick="runComma()">
    <input type="button" id="equal"  class="oper" value="=" onclick="runEquals()">

<div id="Cal">
<textarea   placeholder="Note"></textarea>
</div>
<div id="newpos">
<p id="by">By: Aleksa Kovacevic</p>
<button type="button" id="His" onclick="myFunction()"> Note</button></div>
</form>
<div id="new">
<button onclick="clickCounter()" type="button">Click me!</button>
<textarea  id="result" placeholder="Note"></textarea></div>
</div>
</body>

Margin can't position button 和 textarea

Margin can't possition button and textarea

css

textarea

margin

css-position

button