Question

所以这是我的方框：

好的，现在我想在BET框的输入附近添加框。

<div id="x2"></div> <!-- HTML --->
/* CSS */
#x2{
    width: 40px;
    height: 40px;
    background: cornflowerblue;
}

添加后的方框： BOX-AFTER

正如你所看到的，它弄乱了细灰线和它下面的一切。我真的不确定原因。

HTML：

<div class="gamebox">
        <div id="bet-and-chance-texts">
            <p id="bettext">BET</p>
            <p id="profittext"><i class="fa fa-btc" aria-hidden="true"></i> PROFIT</p>
        </div>
        <div id="bet-and-chance-input-boxes">
            <input class="default" id="userbet" onkeyup="checkBet()" value="0.00000000" placeholder="BTC" name="bet" autocomplete="off">
            <div id="x2">x2</div>
            <input readonly class="default" id="profitinput" onkeyup="" value="100" placeholder="BTC" name="bet" autocomplete="off">
        </div>
        <br>
        <div class="line-separator"></div>
        <div id="button-texts">
            <p id="roll">ROLL UNDER</p>
            <p id="payout">PAYOUT</p>
            <p id="chance">CHANCE</p>
        </div>
        <div id="buttons">
            <input class="hidden-boxed-input-roll" value = "50.00"/>
            <input autocomplete="off" id="newpayout" onkeyup="calculateChance()" class="hidden-boxed-input" value = "2.000"/>
            <input autocomplete="off" id="newchance" onkeyup="checkChance()" class="hidden-boxed-input" value = "50"/>
        </div>
        <br>
        <div id="rolldice-section">
            <button type="button" id="dicebutton" onclick="prepareRoll(authToken);" style="vertical-align:middle"><i class="fa fa-gamepad"></i> Roll dice</button>
        </div>
    </div>

CSS：

     .gamebox {
                height: auto;
                padding: 20px;
                width: 60%;
                font-family: Helvetica Neue;
                color: black;

                margin-top: 20px;
                margin-left: 20px;
                background-color: white;
            }
        .line-separator{
            height:.5px;
            background: lightgray;
            border-bottom:.5px solid lightgray;
        }
#x2{
     width: 40px;
     height: 40px;
     background: cornflowerblue;
    float: left;
 }
input[class="default"]{
    padding: 12px 20px;
    margin : 0 auto;
    box-sizing: border-box;
    text-align: center;
    background-color: #E4ECF1;
    display: inline-block;
}
p[id="roll"]{
    display: inline-block;
    float: left;
    font-size: 13px;
}

p[id="payout"]{
    display: inline-block;
    margin-right: 25px;
    font-size: 13px;
}

p[id="chance"]{
    display: inline-block;
    float: right;
    font-size: 13px;
}
div[id=button-texts]{
    text-align: center;
}

为什么细灰线下面的一切都弄乱了？我该如何解决这个问题？

Answer 1

改变这个：

DriverScript

到：

<div id="x2">x2</div>

由于<span id="x2">x2</span>有块显示，您需要使用内联的div

然后改变你的风格，移除浮动并添加一些填充到＃x2：

span

为什么我的元素失去了位置？

1 个答案: