gpt4 book ai didi

html - 似乎无法让两个元素并排

转载 作者:行者123 更新时间:2023-11-28 03:31:57 29 4
gpt4 key购买 nike

这是我的网页的样子: enter image description here

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

我正在尝试使用 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% 解决了这个问题,但我现在如何强制它呢? enter image description here

最佳答案

试试这段代码添加 box-sizing: border-box;这两个类的属性。

CSS

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

希望这对您有帮助..

关于html - 似乎无法让两个元素并排,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44688688/

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com