1. 首頁
  2. 問答
  3. 我想創建兩個計算器與HTML並排放置

我想創建兩個計算器與HTML並排放置

2016-09-26 26 views
0

我使用Sublime與html 5並排創建兩個計算器，但最終結果是兩個計算器一個在上面，另一個在底部。我想創建兩個計算器與HTML並排放置

這是我的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>

換句話說，我希望這樣一個計算器將被放置在左邊，另一個在右邊，無論是在從頂部相同的距離。

我該怎麼做？

來源

2016-09-26 Michele della Mea

+0

嘗試使用CSS3 Flex Box –

回答

1

你可以簡單地通過給出的div float: left;像這樣做：

#italyCalc, #italyCalc2 { 
 
    float: left; 
 
}
<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>

來源

2016-09-26 11:32:14 RasmusGlenvig

1

添加以下代碼

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


form{ 
 
display:flex; 
 
    justify-content:space-around; 
 
}
<!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>

來源

2016-09-26 11:33:47 Gowtham

+0

嘗試解釋您在那裏做了什麼 –

+0

好的我會解釋 – Gowtham

1

試試這個的jsfiddle我做： https://jsfiddle.net/5se8p4t3/

我嵌套在一個div中的計算器與類，在這種情況下，我把它叫做flexbox，並添加了以下的CSS：

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

基本上就是這樣。

來源

2016-09-26 11:37:41 Grey

相關問題

 相關問題