css字间距与多个字符

Question

我希望所有的数字都在盒子的中心，我正在使用文字间距，但是不行，因为2个字符的数字比其余的数字占用更多的空间。我试图用1个字符（“1”）（“11”）为数字添加一个空格，所以它看起来像那样，但那也不起作用。

    $(document).ready(function () {
        $("#roll").click(function () {
            document.getElementById("roll").disabled = true;
            document.getElementById("re").disabled = true;
            document.getElementById("bl").disabled = true;
            document.getElementById("winner").innerHTML = "";
            var arr = [];
            var r = Math.floor(Math.random() * 17) + 1   
            
            var moveTime;
            if (r == '4') {         //4 red
                moveTime = 8390;
            } else if (r == '15') {  //0 green
                moveTime = 8265;
            } else if (r == '11') {  //11 red
                moveTime = 8140;
            } else if (r == '5' || r == '16') {  //5 black
                moveTime = 8015;
                r = 5;
            } else if (r == '10') {  //10 red
                moveTime = 7890;            
            } else if (r == '6') {  //6 black
                moveTime = 7765;
            } else if (r == '9') {  //9 red
                moveTime = 7640;
            } else if (r == '7') {  //7 black
                moveTime = 7515;
            } else if (r == '8') {  //8 red
                moveTime = 7390;
            } else if (r == '1' || r == '17') { //1 black
                moveTime = 7265;
                r = 1;
            } else if (r == '14') {  //14 red
                moveTime = 7140;
            } else if (r == '2') {  //2 black
                moveTime = 7015;
            } else if (r == '13') {  //13 red
                moveTime = 6890;
            } else if (r == '3') {  //3 black
                moveTime = 6765;
            } else if (r == '12') {  //12 red
                moveTime = 6640;
            }
            var slowDown = 10000000;
            var $div = $('div').css('left', 0);

            while (moveTime > 0) {
                slowDown--;
                arr.push($('div').animate({
                    left: moveTime + "px"
                }, 3000).promise());
                ({

                }, 3000);

                if (slowDown > 0) {
                    slowDown--;
                    moveTime = 0;
                }

                slowDown--;
                moveTime--;
            }
            Promise.all(arr).then(function () {
                
                if (r == '1' || r == '3' || r == '2' || r == '7' || r == '6' || r == '5') {
                    var g = document.getElementById("prev").innerHTML;
                    var h = document.getElementById("prevnum").innerHTML;
                    g = g.substr(15);
                    document.getElementById("winner").innerHTML = "Black" + r + " won!";
                    var betcol = document.getElementById("betc").innerHTML;


                    if (betcol == "black") {
                        var betamount = document.getElementById("betamount").value;
                        var balance = document.getElementById("balance").innerHTML;
                        balance = balance.substr(9);
                        var sum = +balance + +betamount;
                        document.getElementById("balance").innerHTML = "Balance: " + sum;
                    } else {
                        var betamount = document.getElementById("betamount").value;
                        var balance = document.getElementById("balance").innerHTML;
                        balance = balance.substr(9);
                        var sum = +balance - +betamount;
                        document.getElementById("balance").innerHTML = "Balance: " + sum;
                    }
                    //document.getElementById("prev").innerHTML = "Previous rolls:" + " <img src=http://319scholes.org/wp-content/uploads/2012/01/jeremiah1.jpg> " + g;
                    if (r < 10){
                        //r = '<span class="black">'r'</span>'
                    }
                     document.getElementById("prevnum").innerHTML = '<span class="black">'+ r + '</span>' + " " + h;



                } else if (r == '4'|| r == '11' || r == '10' || r == '9' || r == '8' || r == '14' || r == '12' || r == '13') {
                    var g = document.getElementById("prev").innerHTML;
                    var h = document.getElementById("prevnum").innerHTML;
                    g = g.substr(15);
                    document.getElementById("winner").innerHTML = "Red" + r + " won!";
                    var betcol = document.getElementById("betc").innerHTML;
                    if (betcol == "red") {
                        var betamount = document.getElementById("betamount").value;
                        var balance = document.getElementById("balance").innerHTML;
                        balance = balance.substr(9);
                        var sum = +balance + +betamount;
                        document.getElementById("balance").innerHTML = "Balance: " + sum;
                    } else {
                        var betamount = document.getElementById("betamount").value;
                        var balance = document.getElementById("balance").innerHTML;
                        balance = balance.substr(9);
                        var sum = +balance - +betamount;
                        document.getElementById("balance").innerHTML = "Balance: " + sum;
                    }
                 //   document.getElementById("prev").innerHTML = "Previous rolls:" + " <img src=http://www.clker.com/cliparts/X/C/L/8/R/Z/red-box-hi.png> " + g;
                    if (r < 10){
                       // r = '<span class="red">'r'</span>'
                    }
                        
                     document.getElementById("prevnum").innerHTML = '<span class="red">'+ r + '</span>' + " " + h;
                }
                document.getElementById("roll").disabled = false;
                document.getElementById("re").disabled = false;
                document.getElementById("bl").disabled = false;
            });
        });

    });
    $(document).ready(function () {
        $("#re").click(function () {
            document.getElementById("betc").innerHTML = "red";
        });
    });
    $(document).ready(function () {
        $("#bl").click(function () {
            document.getElementById("betc").innerHTML = "black";
        });
    });

    #game {
        position: absolute;
        float: left;
        margin: 170px 0 0 -8400px;
        width: 10000px;
        height: 125px;
        background: repeating-linear-gradient(90deg, #DF0000, #DF0000 125px, #000000 125px, #000000 250px);
        
    }
#game h3{
    text-align: center;
    position: absolute;
    margin: 27px 50px 0 -12px;
    /* padding: 0 0 0 0; */
    width: 10000px;
    font-size: 60px;
    color: white;
    overflow: visible;
    word-spacing: 70px;
    
}
span.green {
      background-size: 125px 125px;     
    background-color: #2dde2d;

}
    h1 {
        text-align: center;
        margin: 130px 0 0 0;
        font-size: 90px;
    }
#arr{
        position: absolute;
            margin: 130px -28px 0 48.2%;
            
    transform: rotate(90deg);
    }
    
    h2 {
        text-align: center;
        font-size: 60px;
        margin: 500px 0 0 0;
    }
    
    h3 {
        font-size: 40px;
    }
    
    body {        
        overflow-x: hidden;
        background-image: url(http://www.casino-capers.org/wp/wp-content/uploads/2015/01/Casino-Capers-Web-Background-2015.jpg); 
    }
    
    button {
        width: 300px;
        height: 100px;
        font-size: 20px;
        margin: 350px 0 0 40%;
        position: absolute;
    }
    #re {
        width: 100px;
        height: 100px;
        font-size: 20px;
        margin: 350px 0 0 30%;
        background-color: red;
        position: absolute;
        
    }
    #bl {
        width: 100px;
        height: 100px;
        font-size: 20px;
        margin: 350px 0 0 62%;
        background-color: black;
        color: white;
        position: absolute;
    }
#balance{
          
        font-size: 50px;
        margin: 80px 0 0 1%;        
        position: absolute; 
}
#betc{
    height: 0px;
    width: 0px;
    position: absolute;
    font-size: 0px;
}
#betamount{
        font-size: 25px;
        margin: 0 0 0 10%;        
        position: absolute; 
    width: 60px;
}
h6{
        font-size: 25px;
        margin: 0 0 0 1%;        
        position: absolute; 
}
#prevnum{
    position: absolute;
    margin: -91px 0 0 248px;
    font-size: 23PX;
    float: left;
    color: white;
    word-spacing: 30.5px;
    width: 400px;
    overflow: hidden;
    height: 65px;
}
    
    img {
        height: 40px;
        width: 40px;
        border-radius: 50%;
        display: inline-block;
    }
        
        .black {
            background-color: black;
            float: left;
            width: 50px;
            line-height: 50px;
            border-radius: 50%;
            color: white;
            text-align: center;
            margin: 5px;
        }
        .red {
            background-color: red;
            float: left;
            width: 50px;
            line-height: 50px;
            border-radius: 50%;
            color: white;
            text-align: center;
            margin: 5px;
        }

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <h3 id="prev">Previous rolls:</h3>
    <h3 id="prevnum"></h3>
    <h6>Bet amount:</h6>
    <input id="betamount" type="text" betamount="betamount">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <button id="roll">Roll</button>
    <div id="game">
        <h3>1  14 2  13 3  12 4 <span class="green">0</span> 11 5  10 6  9  7  8 1  14 2  13 3  12 4 <span class="green">0</span> 11 5  10 6  9  7  8 1  14 2  13 3  12 4 <span class="green">0</span> 11 5  10 6  9  7  8 1  14 2  13 3  12 4 <span class="green">0</span> 11 5  10 6  9  7  8 1  14 2  13 3  12 4  <span class="green">0</span>  11 5  10 6  9  7  8 1  14 2  13 3    </h3></div>

   <img id="arr" src="http://flaviar.com/gui/site/img/post_arrow.png">
    
    <button id="re">Red</button>
    <button id="bl">Black</button>
    <h2 id="balance">Balance: 1000</h2>
    <h2 id="winner"></h2>
    <p id="betc"></p>

</body>
</html>

Answer 1

我不确定当前的方法是否有原因，但我建议不要尝试将数字置于背景图像中，而是将数字放在列表中。

您可以将文字置于li的中心位置，并为li设置一个宽度。这样，您的号码将始终位于中心。给ul list-type一个非删除子弹并将li设置为inline-block会将它们全部放在一行中。使用nth-of-type伪类，您可以将每个其他li设置为具有不同的背景。 More info on nth-of-type

这是我用来演示的快速代码：http://codepen.io/LukeBailey/pen/dOjPZY

注意：我已经注释掉了每个li之间的空白区域，以便触摸它们。这是inline-block的qwerk，如果元素在标记中有空格，则将它们分开。 Article: 'Fighting the Space Between Inline Block Elements'