爲什麼我的元素失去位置？

Question

因此，這裏是我的盒子：

BOX

好了，現在我想補充的BET框的輸入框附近。

<div id="x2"></div> <!-- HTML ---> 
/* CSS */ 
#x2{ 
    width: 40px; 
    height: 40px; 
    background: cornflowerblue; 
} 

後，我將其添加盒： BOX-AFTER

正如你所看到的，它搞砸了細灰線，一切都在它之下。我真的不知道爲什麼。

HTML：

<div class="gamebox"> 
     <div id="bet-and-chance-texts"> 
      <p id="bettext">BET</p> 
      <p id="profittext"><i class="fa fa-btc" aria-hidden="true"></i> PROFIT</p> 
     </div> 
     <div id="bet-and-chance-input-boxes"> 
      <input class="default" id="userbet" onkeyup="checkBet()" value="0.00000000" placeholder="BTC" name="bet" autocomplete="off"> 
      <div id="x2">x2</div> 
      <input readonly class="default" id="profitinput" onkeyup="" value="100" placeholder="BTC" name="bet" autocomplete="off"> 
     </div> 
     <br> 
     <div class="line-separator"></div> 
     <div id="button-texts"> 
      <p id="roll">ROLL UNDER</p> 
      <p id="payout">PAYOUT</p> 
      <p id="chance">CHANCE</p> 
     </div> 
     <div id="buttons"> 
      <input class="hidden-boxed-input-roll" value = "50.00"/> 
      <input autocomplete="off" id="newpayout" onkeyup="calculateChance()" class="hidden-boxed-input" value = "2.000"/> 
      <input autocomplete="off" id="newchance" onkeyup="checkChance()" class="hidden-boxed-input" value = "50"/> 
     </div> 
     <br> 
     <div id="rolldice-section"> 
      <button type="button" id="dicebutton" onclick="prepareRoll(authToken);" style="vertical-align:middle"><i class="fa fa-gamepad"></i> Roll dice</button> 
     </div> 
    </div> 

CSS：

 .gamebox { 
       height: auto; 
       padding: 20px; 
       width: 60%; 
       font-family: Helvetica Neue; 
       color: black; 

       margin-top: 20px; 
       margin-left: 20px; 
       background-color: white; 
      } 
     .line-separator{ 
      height:.5px; 
      background: lightgray; 
      border-bottom:.5px solid lightgray; 
     } 
#x2{ 
    width: 40px; 
    height: 40px; 
    background: cornflowerblue; 
    float: left; 
} 
input[class="default"]{ 
    padding: 12px 20px; 
    margin : 0 auto; 
    box-sizing: border-box; 
    text-align: center; 
    background-color: #E4ECF1; 
    display: inline-block; 
} 
p[id="roll"]{ 
    display: inline-block; 
    float: left; 
    font-size: 13px; 
} 

p[id="payout"]{ 
    display: inline-block; 
    margin-right: 25px; 
    font-size: 13px; 
} 

p[id="chance"]{ 
    display: inline-block; 
    float: right; 
    font-size: 13px; 
} 
div[id=button-texts]{ 
    text-align: center; 
} 

爲什麼一切的細灰線之下搞的一團糟？我該如何解決這個問題？

Answer 1

更改此：

<div id="x2">x2</div> 

到：

<span id="x2">x2</span> 

因爲div有塊顯示屏，您需要使用span這是直列

然後改變你的風格，去除浮動，並添加一些填充到＃x2：

#x2 { 
    padding: 13px; 
    width: 40px; 
    height: 40px; 
    background: cornflowerblue; 
}