Question

以下是我的网页：

正如我在图片中突出显示的那样，我正在尝试将平衡元素移动到右侧。

我正在尝试使用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>

更新：将.balance宽度减少到40％解决了这个问题，但我怎么能强迫它呢？

Answer 1

您正在寻找以下结构，

这里发生的是当你将固定宽度应用于div并且它们应用填充和边距以便你的元素宽度增加时

这样可以更好地创建另一个子容器并在那里分配填充边距

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

试试这段代码添加box-sizing：border-box;属于两个类。

CSS

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

希望这会有所帮助..

Answer 3

您可以按如下方式尝试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;
}

似乎无法让两个元素并排

3 个答案: