我希望显示器到第二个计算器中按钮的距离为100px，但我不知道该怎么做。
这是我的HTML代码：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="design2.css" >
<title>Calculator Italy</title>
</head>
<body bgcolor="skyblue">
<form>
<div id="italyCalc">
<input type="text" id="display" disabled><br>
<input type="button" id="item1" onclick="adding('1')" value="1" >
<input type="button" id="item1" onclick="adding('2')" value="2" >
<input type="button" id="item1" onclick="adding('3')" value="3" >
<input type="button" id="item1" onclick="adding('+')" value="+" ><br>
<input type="button" id="item2" onclick="adding('4')" value="4" >
<input type="button" id="item2" onclick="adding('5')" value="5" >
<input type="button" id="item2" onclick="adding('6')" value="6" >
<input type="button" id="item2" onclick="deleteLast()" value="<--" ><br>
<input type="button" id="item1" onclick="adding('7')" value="7" >
<input type="button" id="item1" onclick="adding('8')" value="8" >
<input type="button" id="item1" onclick="adding('9')" value="9" >
<input type="button" id="item1" onclick="adding('.')" value="." ><br>
<input type="button" id="item2" onclick="adding('0')" value="0" >
<input type="button" id="item2" onclick="adding('-')" value="-" >
<input type="button" id="item2" onclick="adding('*')" value="*" >
<input type="button" id="item2" onclick="adding('/')" value="/" ><br>
<input type="button" id="itemBig" onclick="adding('C')" value="C" >
<input type="button" id="item1" onclick="power('2')" value="X^2" >
<input type="button" id="itemBig" onclick="returnResult()" value="=" >
</div>
<div id="italyCalc2">
<input type="text" id="display2" disabled><br>
<input type="button" id="item" onclick="adding2('1')" value="1" >
<input type="button" id="item" onclick="adding2('2')" value="2" >
<input type="button" id="item" onclick="adding2('3')" value="3" >
<input type="button" id="item" onclick="adding2('+')" value="+" >
<input type="button" id="item" onclick="power3('3')" value="X^3" ><br>
<input type="button" id="item" onclick="adding2('4')" value="4" >
<input type="button" id="item" onclick="adding2('5')" value="5" >
<input type="button" id="item" onclick="adding2('6')" value="6" >
<input type="button" id="item" onclick="deleteLast2()" value="<--" >
<input type="button" id="item" onclick="sin2()" value="sin" ><br>
<input type="button" id="item" onclick="adding2('7')" value="7" >
<input type="button" id="item" onclick="adding2('8')" value="8" >
<input type="button" id="item" onclick="adding2('9')" value="9" >
<input type="button" id="item" onclick="adding2('.')" value="." >
<input type="button" id="item" onclick="cos2()" value="cos" ><br>
<input type="button" id="item" onclick="adding2('0')" value="0" >
<input type="button" id="item" onclick="adding2('-')" value="-" >
<input type="button" id="item" onclick="adding2('*')" value="*" >
<input type="button" id="item" onclick="adding2('/')" value="/" >
<input type="button" id="item" onclick="root2('2')" value="sqrt" ><br>
<input type="button" id="itemBig" onclick="adding2('C')" value="C" >
<input type="button" id="itemBig" onclick="returnResult2()" value="=" >
</div>
</form>
<script src="logic2.js"></script>
</body>
</html>
这是我的css代码的一部分：
#italyCalc2
{
height: 500px;
width: 300px;
border: 3px solid green;
box-shadow: 0px 0px 100px green;
background-image: url("https://tse3.mm.bing.net/th?id=OIP.M4cfd6650aaff3feadc8bed590687b6b7H0&pid=15.1&P=0&w=274&h=172");
margin: 100px;
text-align: center;
float:left;
}
#display2
{
margin-top: 20px;
margin-bottom: 20px;
border: 1px solid red;
box-shadow: 0px 0px 30px red;
width: 260px;
height: 60px;
text-align: right;
font: 20px bold;
color: red;
}
#item
{
width: 41px;
height: 41px;
margin-left: 4px;
margin-bottom: 31px;
box-shadow: 0px 0px 20px white;
cursor: pointer;
color: white;
background-color: red;
border: 1px solid white;
font-weight: bold;
}
换句话说，我希望看到按钮下方的显示和100px而不修改从一个按钮到另一个按钮的距离。
我该怎么做？
答案 0 :(得分：1)
我想说，只需将margin-bottom添加到#display2并将其作为块元素：
#display2 {
display: block:
margin-top: 20px;
margin-bottom: 100px;
border: 1px solid red;
box-shadow: 0px 0px 30px red;
width: 260px;
height: 60px;
text-align: right;
font: 20px bold;
color: red;
}
答案 1 :(得分：0)
您可以在按钮上添加margin-top，但是应该将它们包装在div中。
#italyCalc2 {
height: 500px;
width: 300px;
border: 3px solid green;
box-shadow: 0px 0px 100px green;
background-image: url("https://tse3.mm.bing.net/th?id=OIP.M4cfd6650aaff3feadc8bed590687b6b7H0&pid=15.1&P=0&w=274&h=172");
margin: 100px;
text-align: center;
float: left;
}
#display2 {
margin-top: 20px;
//margin-bottom: 20px;
border: 1px solid red;
box-shadow: 0px 0px 30px red;
width: 260px;
height: 60px;
text-align: right;
font: 20px bold;
color: red;
}
#item {
width: 41px;
height: 41px;
margin-left: 4px;
margin-bottom: 31px;
box-shadow: 0px 0px 20px white;
cursor: pointer;
color: white;
background-color: red;
border: 1px solid white;
font-weight: bold;
}
.buttons {
margin-top: 100px;
}<body bgcolor="skyblue">
<form>
<div id="italyCalc">
<input type="text" id="display" disabled>
<br>
<input type="button" id="item1" onclick="adding('1')" value="1">
<input type="button" id="item1" onclick="adding('2')" value="2">
<input type="button" id="item1" onclick="adding('3')" value="3">
<input type="button" id="item1" onclick="adding('+')" value="+">
<br>
<input type="button" id="item2" onclick="adding('4')" value="4">
<input type="button" id="item2" onclick="adding('5')" value="5">
<input type="button" id="item2" onclick="adding('6')" value="6">
<input type="button" id="item2" onclick="deleteLast()" value="<--">
<br>
<input type="button" id="item1" onclick="adding('7')" value="7">
<input type="button" id="item1" onclick="adding('8')" value="8">
<input type="button" id="item1" onclick="adding('9')" value="9">
<input type="button" id="item1" onclick="adding('.')" value=".">
<br>
<input type="button" id="item2" onclick="adding('0')" value="0">
<input type="button" id="item2" onclick="adding('-')" value="-">
<input type="button" id="item2" onclick="adding('*')" value="*">
<input type="button" id="item2" onclick="adding('/')" value="/">
<br>
<input type="button" id="itemBig" onclick="adding('C')" value="C">
<input type="button" id="item1" onclick="power('2')" value="X^2">
<input type="button" id="itemBig" onclick="returnResult()" value="=">
</div>
<div id="italyCalc2">
<input type="text" id="display2" disabled>
<br>
<div class="buttons">
<input type="button" id="item" onclick="adding2('1')" value="1">
<input type="button" id="item" onclick="adding2('2')" value="2">
<input type="button" id="item" onclick="adding2('3')" value="3">
<input type="button" id="item" onclick="adding2('+')" value="+">
<input type="button" id="item" onclick="power3('3')" value="X^3">
<br>
<input type="button" id="item" onclick="adding2('4')" value="4">
<input type="button" id="item" onclick="adding2('5')" value="5">
<input type="button" id="item" onclick="adding2('6')" value="6">
<input type="button" id="item" onclick="deleteLast2()" value="<--">
<input type="button" id="item" onclick="sin2()" value="sin">
<br>
<input type="button" id="item" onclick="adding2('7')" value="7">
<input type="button" id="item" onclick="adding2('8')" value="8">
<input type="button" id="item" onclick="adding2('9')" value="9">
<input type="button" id="item" onclick="adding2('.')" value=".">
<input type="button" id="item" onclick="cos2()" value="cos">
<br>
<input type="button" id="item" onclick="adding2('0')" value="0">
<input type="button" id="item" onclick="adding2('-')" value="-">
<input type="button" id="item" onclick="adding2('*')" value="*">
<input type="button" id="item" onclick="adding2('/')" value="/">
<input type="button" id="item" onclick="root2('2')" value="sqrt">
<br>
<input type="button" id="itemBig" onclick="adding2('C')" value="C">
<input type="button" id="itemBig" onclick="returnResult2()" value="=">
</div>
</div>
</form>