Kann nicht scheinen, zwei Elemente zu bekommen zu sein Side-by-Side-

Hier ist, was meine Webseite wie folgt aussieht: Kann nicht scheinen, zwei Elemente zu bekommen zu sein Side-by-Side-

Als ich im Bild hervorgehoben, ich versuche die Balance Element die zu bewegen rechte Seite.

Ich versuche, das display:inline-block-Tag zu verwenden, um dies zu tun.

Hier ist mein CSS und HTML ... was mache ich falsch?

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: Reduzierung der .balance Breite zu 40% das Problem behoben, aber wie kann ich es nun zwingen?

Quelle

2017-06-22 linux932

Sie machen Breite 50% und Hinzufügen von Polsterung macht seine Breite mehr als 50%, versuchen Sie, die Breite oder Polsterung zu ändern. –

Box-Sizing hinzufügen: border-box; zu beiden Klassen und geben Sie einen Versuch –

versuchen float: links; auf beiden Klassen. –

Versuchen Sie diesen Code hinzufügen Box-Sizing: border-box; Eigenschaft für beide Klassen.

CSS

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

Hoffnung dieses ..

Quelle

2017-06-22 01:48:24

Sie nach unten Struktur suchen,

, was hier passiert ist, wenn Sie feste Breite gelten für div und sie padding und margin anzuwenden, um Ihre Elementbreite

erhöht wird

so dass Sie besser ein anderes Kind erstellen Behälter und weisen dort

padding Marge

.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>

Quelle

2017-06-22 01:45:29 Rahul

hilft Sie können Flexbox versuchen wie folgt.

<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; 
}

Quelle

2017-06-22 02:02:33 Tipu

Kann nicht scheinen, zwei Elemente zu bekommen zu sein Side-by-Side-

Antwort

Verwandte Themen