html - 我怎样才能摆脱两个侧面板元素之间的空间？

Question

这是我正在尝试做的事情的蓝图:

我正在尝试获取红色轮廓所在的统计元素。我不确定为什么统计数据和平衡面板之间存在巨大差距。我正在使用 display:inline-block; 将这些面板放在我的 .gamebox 元素的左侧。

面板的 CSS:

/* Balance box */
.balance{
    height: 10%;
    margin: 20px;
    width: 30%;
    font-family: "smooth";
    background-color: white;
    color: black;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    display:inline-block;
    position: fixed;
}

/* stats box */
.stats{
    height: auto;
    margin: 20px;
    width: 30%;
    font-family: "smooth";
    background-color: white;
    color: black;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    display:inline-block;
}

游戏面板的 CSS:

/* Game box */
.gamebox{
    height: auto;
    margin: 20px;
    padding: 20px;
    width: 50%;
    font-family: "smooth";
    background-color: white;
    color: black;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    display:inline-block;
}

HTML:

<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" onkeyup="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">Profit: 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"><i class="fa fa-gamepad" aria-hidden="true"></i> 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 class="stats">
        <p>Stats</p>
        <p>Profit: 0BTC</p>
        <p>Wagered: 0BTC</p>
        <p>Wins: 0</p>
        <p>Losses: 0</p>
    </div>

Answer 1

因为您使用了inline-block，所以可以使用vertical-align 控制统计面板的对齐方式。请参阅下面的修改。

/* Balance box */
.balance{
    height: 10%;
    margin: 20px;
    width: 30%;
    font-family: "smooth";
    background-color: white;
    color: black;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    display:inline-block;
    position: fixed;
}

/* stats box */
.stats{
    height: auto;
    margin: 20px;
    width: 30%;
    font-family: "smooth";
    background-color: white;
    color: black;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    display:inline-block;
}

/* Game box */
.gamebox{
    height: auto;
    margin: 20px;
    padding: 20px;
    width: 50%;
    font-family: "smooth";
    background-color: white;
    color: black;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    display:inline-block;
    vertical-align: middle;
}

<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" onkeyup="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">Profit: Loading...</h3>
        <button type="button" id="dicebutton" onclick="prepareRoll(username, hash);" style="vertical-align:middle"><i class="fa fa-gamepad" aria-hidden="true"></i> 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 class="stats">
    <p>Stats</p>
    <p>Profit: 0BTC</p>
    <p>Wagered: 0BTC</p>
    <p>Wins: 0</p>
    <p>Losses: 0</p>
</div>