Question

我使用Sublime与html 5并排创建两个计算器，但最终结果是两个计算器，一个在上面，另一个在底部。

这是我的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="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>
    </form>
    <script src="logic2.js"></script>
  </body>
</html>

换句话说，我希望一个计算器放在左边，另一个放在右边，两者距离顶部相同。

我该怎么做？

Answer 1

你可以通过给出这两个div float: left;来做到这一点：

＆＃13;

#italyCalc, #italyCalc2 {
  float: left;
}

＆＃13;

<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="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>
    </form>

＆＃13;

Answer 2

添加以下代码

form{
display:flex;
  justify-content:space-around;
}

＆＃13;

form{
display:flex;
  justify-content:space-around;
}

＆＃13;

<!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="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>
    </form>
<script src="logic2.js"></script>
</body>
</html>

＆＃13;

Answer 3

将计算器div包裹在一个div calculatorContainer

中

#calculatorContainer{ display: flex;flex-direction:row}

Jsbin： http://jsbin.com/becumoxobi/edit?html,css,output

Answer 4

尝试我制作的这个jsfiddle： https://jsfiddle.net/5se8p4t3/

我用一个类将div中的计算器嵌套在一起，在这种情况下，我将其称为flexbox，并将以下css添加到其中：

.flexbox {
   display: -webkit-flex;
   display: flex;
   background-color: lightgrey;
}

基本上就是这样。

我想创建两个与html

4 个答案: