我希望所有数字都位于方框的中央，我目前正在使用字间距，但这不起作用，因为具有 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>最佳答案
我不确定当前的方法是否有理由，但我建议不要尝试将数字置于背景图像的中心，而是将数字放在列表中。
您可以将 li 中的文本居中，还可以为 li 设置宽度。这样您的号码将始终位于中心。将 ul 的 list-type 设置为 non 将删除元素符号并将 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'
关于javascript - 具有多个字符的css字间距，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41059506/