なぜ私の要素はポジションを失うのですか？だからここ

Question

が私のボックスです：

BOX

[OK]を、今私は、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を使用する必要が

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

div以来

はその後、自分のスタイルを変更するフロートを削除し、追加しますいくつかのパディングを＃x2：

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