似乎無法獲得兩個元素是並排側

正如我在圖片中突出顯示的，我試圖平衡元素移到右邊。

我正在嘗試使用display:inline-block標記來執行此操作。

這是我的CSS和HTML ...我做錯了什麼？

CSS：

/* Game box */ 
.gamebox{ 
    height: auto; 
    margin: 20px; 
    padding: 20px; 
    width: 50%; 
    font-family: "smooth"; 
    background-color: white; 
    color: black; 
    box-shadow: 4px 4px lightgray; 
    display:inline-block; 
} 

/* Balance box */ 
.balance{ 
    height: auto; 
    margin: 20px; 
    padding: 20px; 
    width: 50%; 
    font-family: "smooth"; 
    background-color: white; 
    color: black; 
    box-shadow: 4px 4px lightgray; 
    display:inline-block; 
}

HTML：

<body> 

<div class="noselection"> 

<ul class="topnav"> 
    <li><a class="active" href="#home"><i class="fa fa-rocket" aria-hidden="true"></i> Play</a></li> 
    <li><a href="deposit.php"><i class="fa fa-btc" aria-hidden="true"></i> Deposit</a></li> 
    <li><a href="#contact"><i class="fa fa-btc" aria-hidden="true"></i> Withdraw</a></li> 
    <li><a href="faucet.php"><i class="fa fa-university" aria-hidden="true"></i>Faucet</a></li> 
    <li><a href="#support"><i class="fa fa-life-ring" aria-hidden="true"></i>Help & Support</a></li> 
    <?php echo $accountButton; ?> 
    <li class='right' id="top-balance"><a href=''></a></li> 
</ul> 

    <div class="gamebox"> 
     <h1><i class="fa fa-btc" aria-hidden="true"></i>itcoin dice game</h1> 
     <div class="error" id="error">You don't have anymore bitcoins left. Why not deposit some more?</div> 
     <form id="index"> 
      Bet 
      <br> 
      <span> 
       <input id="userbet" onkeyup="checkBet()" value="100" type="text" name="bet" autocomplete="off"> 
       <span id="beterror" class="errortext">That bet is not a valid bet.</span> 
       <span id="x2" class="timestwo" onclick="doubleBet()">x2</span> 
       <span id="/2" class="dividetwo" onclick="divideBet()">/2</span> 
      </span> 
      <br> 
      <span> 
      Chance<br> 
      <input id ="userchance" onkeydown="checkChance()" value="50" type="text" name="chance" autocomplete="off"> 
      <span id="chanceerror" class="errortext">That is not a valid chance.</span> 
      </span> 
      <br> 
      <h3 id="payout">Payout: Loading...</h3> 
      <script>var username = <?php echo json_encode($_SESSION['username']); ?>;</script> 
      <script>var hash = <?php echo json_encode($_SESSION['hash']); ?>;</script> 
      <button type="button" id="dicebutton" onclick="prepareRoll(username, hash);" style="vertical-align:middle"><img src="Images/dice.png"> Roll dice!</button> 
     </form> 
     <button type="button" id="autobet" onclick="setAutoBet(true)"><i class="fa fa-rocket" aria-hidden="true"></i> Autobet</button> 
     <div class="autobet-mode" id="autobet-mode"> 
      <h3 id="auto-bet-start-text">Please set your auto bet settings, then click 'Start rolling'!".</h3> 
      <button type="button" id="start-autobet" onclick="startAutoBet()">Start rolling!</button> 
     </div> 
    </div> 

    <div class="balance"> 
     <h3 id="balance">Balance: Loading...</h3> 
    </div> 

</div> 

<?php echo $script; ?> 

</body>

UPDATE：減小.balance寬度固定的問題，40％，但我怎麼能現在迫使它呢？

來源

2017-06-22 linux932

你正在寬度的50％，並添加填充它使得其寬度超過50％，嘗試改變寬度或填充。 –

add box-sizing：border-box;給這兩個班並試一試 –

試試float：left;在兩個類上。 –

試試看這個代碼 add box-sizing：border-box;財產給這兩個類。

CSS

.gamebox, .balance{ 
box-sizing: border-box; 
}

希望這有助於..

來源

2017-06-22 01:48:24

您正在尋找下面的結構，

這裏所發生的，當你申請固定寬度的div並將其應用於填充和利潤率讓你的元素寬度得到增加

所以最好創建另一個孩子容器和分配填充餘量那邊

.gamebox, .balance{ 
 
    width: 50%; 
 
    float: left; 
 
    height: 100px; 
 
} 
 
.gamebox-inner, .balance-inner{ 
 
    border: 1px solid red; 
 
    padding: 10px; 
 
    margin: 10px; 
 
    background-color: #ddd; 
 
}

<div class="gamebox"> 
 
    <div class="gamebox-inner"> 
 
    a 
 
    </div> 
 
</div> 
 
<div class="balance"> 
 
    <div class="balance-inner"> 
 
    b 
 
    </div> 
 
</div>

來源

2017-06-22 01:45:29 Rahul

您可以嘗試Flexbox的如下。

<div id="container"> 
<div class ="first">first</div> 
<div class="second">second</div> 
</div> 
#container { 
    width: 200px; 
    height: 300px;enter code here 
    border: 1px solid black; 
    backgroud-color:red; 
    display:flex; 
} 
.first { 
    background-color:blue; 
    width:50px; 
    height:50px; 
    flex:1; 
} 
.second { 
    background-color:green; 
    width:50px; 
    height:50px; 
    flex:2; 
}

來源

2017-06-22 02:02:33 Tipu

似乎無法獲得兩個元素是並排側

回答

相關問題