填充无法正常工作

【问题标题】：Padding not working properly填充无法正常工作
【发布时间】：2017-01-07 03:02:09
【问题描述】：

我正在用 Javascript 制作井字游戏，而棋盘上的“X”和“O”有点向下，并且不在垂直轴上。我尝试使用 padding-top 或 padding-bottom 修复它，但似乎它们什么也没做。我将留下整个代码。

<!DOCTYPE>
<!DOCTYPE html>
<html>
<head>
	<!-- INITIALIZE -->
		<link href="https://fonts.googleapis.com/css?family=Passion+One" rel="stylesheet">
		<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

		<script src="https://use.fontawesome.com/ca5f7b6f9a.js"></script>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

		<link rel="stylesheet" href="stylesheet.css">
		<script src="script.js"></script>

		<!--CONTENT-->
		<title>TicTacToe</title>
</head>
<body>
	<div class="container text-center">

		<div id="title">
			TIC-TAC-TOE
		</div>

		<div id="textContainer">

		</div>



	</div>
	

</body>
</html>

$(document).ready(function() {
	chooseSide();
});

var playerSelect, aiSelect = "";
var turn;
var gameOn;
var xWins;
var counter = 0;
var drawGame = false;
var gridArray = [];

function chooseSide(){

	$('#textContainer').html('<p> Choose side: </p> <div class="chooseButton">X</div> <div class="chooseButton">O</div>');

	$('.chooseButton').click(function(){
		playerSelect = $(this).html();

		if(playerSelect == "X"){
			aiSelect = "O";
		} else { aiSelect = "X"; }

		iniGame();

	});
}

function iniGame(){
	$('#textContainer').fadeOut("fast", function(){
		$('#textContainer').remove();
	});

	$('body').hide().append('<div id="gridContainer"></div>').fadeIn("slow");
	$('body').hide().append('<div id="winnerContainer"> <div id="replay" class="text-center fa fa-refresh fa-3x"></div> </div>').fadeIn("slow");
	
	gameOn = true;
	turn = "player";
	resetGrid();
}

function resetGrid(){

	$('.gridElement').remove();

	for(var i = 0; i < 9; i++){
		$('#gridContainer').append('<div class="gridElement" id="gridNumber'+i+'"></div>');
		gridArray.push('e');
	}

	console.log(gridArray);

	/*var gridElementSize = $('#gridContainer').width()/3;

	$('.gridElement').css({'width': gridElementSize, 'height': gridElementSize});*/

	$('.gridElement').click(function(e){
		handlePlayerClick(e);
	});

}

function handlePlayerClick(e){

	if(gameOn == false){

		if(xWins == true && drawGame == false){
			console.log("X Wins");
		} else if(xWins == false && drawGame == false){
			console.log("O Wins");
		} else if(xWins == false && drawGame == true){
			console.log("Its a draw");
		}

		return;

	}  else {

		if(turn == "player"){

			square = $(e.target);

			if(square.html() == ""){
				square.html(playerSelect);
				turn = "enemy";
				console.log('Player has made a move');
				checkForWin();
				if(gameOn == true){
					makeEnemyMove();	
				}
			} else { console.log("Square taken"); } 

		} else {
			if(gameOn == true){
				makeEnemyMove();	
			}
			console.log("Enemy's turn");
		}

	}
}

function makeEnemyMove(){
	var chooseNumber = Math.floor(Math.random()*9);
	var chooseBox = $('#gridNumber'+chooseNumber);

	if(chooseBox.html() == ''){
		chooseBox.html(aiSelect);
		checkForWin();
		turn ="player";
	} else {
		makeEnemyMove();
	}

}

function checkForWin(){


	for(var i = 0; i < 9; i++){
		var squareVal = $('#gridNumber' + i).html();
		if(squareVal !== ''){
			counter ++;
		}
		gridArray[i] = squareVal;
	}
	console.log(counter);
	
	//--- X Checks for winning ----
	if( (gridArray[0] == 'X' && gridArray[1] == 'X' && gridArray[2] == 'X') ||
		(gridArray[3] == 'X' && gridArray[4] == 'X' && gridArray[5] == 'X') ||
		(gridArray[6] == 'X' && gridArray[7] == 'X' && gridArray[8] == 'X') ||
		(gridArray[0] == 'X' && gridArray[3] == 'X' && gridArray[6] == 'X') ||
		(gridArray[1] == 'X' && gridArray[4] == 'X' && gridArray[7] == 'X') ||
		(gridArray[2] == 'X' && gridArray[5] == 'X' && gridArray[8] == 'X') ||
		(gridArray[0] == 'X' && gridArray[4] == 'X' && gridArray[8] == 'X') ||
		(gridArray[2] == 'X' && gridArray[4] == 'X' && gridArray[6] == 'X') ) 
	{ 
		gameOn = false; 
		xWins = true;
		$('#winnerContainer').append('<div id="winnerText">X WINS!</div>');
	}

	//--- Y Checks for winning ----
	if( (gridArray[0] == 'O' && gridArray[1] == 'O' && gridArray[2] == 'O') ||
		(gridArray[3] == 'O' && gridArray[4] == 'O' && gridArray[5] == 'O') ||
		(gridArray[6] == 'O' && gridArray[7] == 'O' && gridArray[8] == 'O') ||
		(gridArray[0] == 'O' && gridArray[3] == 'O' && gridArray[6] == 'O') ||
		(gridArray[1] == 'O' && gridArray[4] == 'O' && gridArray[7] == 'O') ||
		(gridArray[2] == 'O' && gridArray[5] == 'O' && gridArray[8] == 'O') ||
		(gridArray[0] == 'O' && gridArray[4] == 'O' && gridArray[8] == 'O') ||
		(gridArray[2] == 'O' && gridArray[4] == 'O' && gridArray[6] == 'O') )
	{ 
		gameOn = false; 
		xWins = false;
		$('#winnerContainer').append('<div id="winnerText">O WINS!</div>');
	}

	if(counter == 9 && gameOn == true){
		drawGame = true;
		gameOn = false;
		console.log("Its a draw");
	} else {counter = 0;}

	if(gameOn == false && drawGame == false){
		if(xWins == true){
			console.log("X Wins");
		} else {
			console.log("O Wins");
		}
		return;
	}

}
body{
	background-color: #338f51;
	font-family: 'Passion One', cursive;


}

#title{
	color: #fbd242;
	font-size: 120px;

	margin-top: 10px;
}

#textContainer{
	color: #fbd242;
	font-size: 40px;

	margin-top: 20%;


}

.chooseButton{

	display: inline-block;

	font-size: 120px;

	border-radius: 10px;

	padding-top:10px;
	padding-left: 50px;
	padding-right: 50px;


	background-color: #d81f70;
}

#gridContainer{
	width: 400px;
	height: 400px;

	background-color: #ef529c;
	border-radius: 10px; 

	margin-left: auto;
	margin-right: auto;
	margin-top: 10px;
}

#gridContainer > div{

	color: #fbd242;
	font-size: 140px;
	background-color: #d81f70;

	padding-bottom: 20px;
	padding-left: 25px;
	margin-top: 10px;
	margin-left: 10px;

	display: inline-block;

	width: 120px; height: 120px;
	vertical-align:top;

	border: 1px solid #d81f70;
}



#replay{

	color: #fbd242;

	width: 20px;

	display:block;

	margin-left: auto;
	margin-right: auto;
	margin-top: 10px;
}
<!DOCTYPE>
<!DOCTYPE html>
<html>
<head>
	<!-- INITIALIZE -->
		<link href="https://fonts.googleapis.com/css?family=Passion+One" rel="stylesheet">
		<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

		<script src="https://use.fontawesome.com/ca5f7b6f9a.js"></script>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

		<link rel="stylesheet" href="stylesheet.css">
		<script src="script.js"></script>

		<!--CONTENT-->
		<title>TicTacToe</title>
</head>
<body>
	<div class="container text-center">

		<div id="title">
			TIC-TAC-TOE
		</div>

		<div id="textContainer">

		</div>



	</div>
	

</body>
</html>

【问题讨论】：

  • 请提供一个最小的工作Demo

标签： javascript html css padding


【解决方案1】：

另一个简单的解决方法是将网格容器 ID 中的字体大小更改为 100 像素而不是 140 像素。这将使 X 和 O 元素正确居中。

【讨论】：

    【解决方案2】：

    需要调整#gridContainer &gt; div的行高，见fiddlehttps://jsfiddle.net/sxh0n7d1/34/

    #gridContainer > div {
    color: #fbd242;
    font-size: 140px;
    background-color: #d81f70;
    margin-top: 10px;
    margin-left: 10px;
    display: inline-block;
    width: 120px;
    height: 120px;
    vertical-align: top;
    border: 1px solid #d81f70;
    line-height: 110px;
}

    【讨论】：

      【解决方案3】：

      需要更新一些**CSS:*

      .gridElement{
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
}

      这是工作的Demo

      代码：

      注意：运行 sn-p 代码需要一些时间来加载。点击run snippet code后等待加载 

      $(document).ready(function() {
	chooseSide();
});

var playerSelect, aiSelect = "";
var turn;
var gameOn;
var xWins;
var counter = 0;
var drawGame = false;
var gridArray = [];

function chooseSide(){

	$('#textContainer').html('<p> Choose side: </p> <div class="chooseButton">X</div> <div class="chooseButton">O</div>');

	$('.chooseButton').click(function(){
		playerSelect = $(this).html();

		if(playerSelect == "X"){
			aiSelect = "O";
		} else { aiSelect = "X"; }

		iniGame();

	});
}

function iniGame(){
	$('#textContainer').fadeOut("fast", function(){
		$('#textContainer').remove();
	});

	$('body').hide().append('<div id="gridContainer"></div>').fadeIn("slow");
	$('body').hide().append('<div id="winnerContainer"> <div id="replay" class="text-center fa fa-refresh fa-3x"></div> </div>').fadeIn("slow");
	
	gameOn = true;
	turn = "player";
	resetGrid();
}

function resetGrid(){

	$('.gridElement').remove();

	for(var i = 0; i < 9; i++){
		$('#gridContainer').append('<div class="gridElement" id="gridNumber'+i+'"></div>');
		gridArray.push('e');
	}

	console.log(gridArray);

	/*var gridElementSize = $('#gridContainer').width()/3;

	$('.gridElement').css({'width': gridElementSize, 'height': gridElementSize});*/

	$('.gridElement').click(function(e){
		handlePlayerClick(e);
	});

}

function handlePlayerClick(e){

	if(gameOn == false){

		if(xWins == true && drawGame == false){
		} else if(xWins == false && drawGame == false){
		} else if(xWins == false && drawGame == true){
		}

		return;

	}  else {

		if(turn == "player"){

			square = $(e.target);

			if(square.html() == ""){
				square.html(playerSelect);
				turn = "enemy";
				checkForWin();
				if(gameOn == true){
					makeEnemyMove();	
				}
			} else { } 

		} else {
			if(gameOn == true){
				makeEnemyMove();	
			}
		}

	}
}

function makeEnemyMove(){
	var chooseNumber = Math.floor(Math.random()*9);
	var chooseBox = $('#gridNumber'+chooseNumber);

	if(chooseBox.html() == ''){
		chooseBox.html(aiSelect);
		checkForWin();
		turn ="player";
	} else {
		makeEnemyMove();
	}

}

function checkForWin(){


	for(var i = 0; i < 9; i++){
		var squareVal = $('#gridNumber' + i).html();
		if(squareVal !== ''){
			counter ++;
		}
		gridArray[i] = squareVal;
	}
	
	//--- X Checks for winning ----
	if( (gridArray[0] == 'X' && gridArray[1] == 'X' && gridArray[2] == 'X') ||
		(gridArray[3] == 'X' && gridArray[4] == 'X' && gridArray[5] == 'X') ||
		(gridArray[6] == 'X' && gridArray[7] == 'X' && gridArray[8] == 'X') ||
		(gridArray[0] == 'X' && gridArray[3] == 'X' && gridArray[6] == 'X') ||
		(gridArray[1] == 'X' && gridArray[4] == 'X' && gridArray[7] == 'X') ||
		(gridArray[2] == 'X' && gridArray[5] == 'X' && gridArray[8] == 'X') ||
		(gridArray[0] == 'X' && gridArray[4] == 'X' && gridArray[8] == 'X') ||
		(gridArray[2] == 'X' && gridArray[4] == 'X' && gridArray[6] == 'X') ) 
	{ 
		gameOn = false; 
		xWins = true;
		$('#winnerContainer').append('<div id="winnerText">X WINS!</div>');
	}

	//--- Y Checks for winning ----
	if( (gridArray[0] == 'O' && gridArray[1] == 'O' && gridArray[2] == 'O') ||
		(gridArray[3] == 'O' && gridArray[4] == 'O' && gridArray[5] == 'O') ||
		(gridArray[6] == 'O' && gridArray[7] == 'O' && gridArray[8] == 'O') ||
		(gridArray[0] == 'O' && gridArray[3] == 'O' && gridArray[6] == 'O') ||
		(gridArray[1] == 'O' && gridArray[4] == 'O' && gridArray[7] == 'O') ||
		(gridArray[2] == 'O' && gridArray[5] == 'O' && gridArray[8] == 'O') ||
		(gridArray[0] == 'O' && gridArray[4] == 'O' && gridArray[8] == 'O') ||
		(gridArray[2] == 'O' && gridArray[4] == 'O' && gridArray[6] == 'O') )
	{ 
		gameOn = false; 
		xWins = false;
		$('#winnerContainer').append('<div id="winnerText">O WINS!</div>');
	}

	if(counter == 9 && gameOn == true){
		drawGame = true;
		gameOn = false;
	} else {counter = 0;}

	if(gameOn == false && drawGame == false){
		if(xWins == true){
		} else {
		}
		return;
	}

}
      body{
	background-color: #338f51;
	font-family: 'Passion One', cursive;


}

#title{
	color: #fbd242;
	font-size: 120px;

	margin-top: 10px;
}

#textContainer{
	color: #fbd242;
	font-size: 40px;

	margin-top: 20%;


}

.chooseButton{

	display: inline-block;

	font-size: 120px;

	border-radius: 10px;

	padding-top:10px;
	padding-left: 50px;
	padding-right: 50px;


	background-color: #d81f70;
}

#gridContainer{
	width: 400px;
	height: 400px;

	background-color: #ef529c;
	border-radius: 10px; 

	margin-left: auto;
	margin-right: auto;
	margin-top: 10px;
}

#gridContainer > div{

	color: #fbd242;
	font-size: 140px;
	background-color: #d81f70;

	padding-bottom: 20px;
	padding-left: 25px;
	margin-top: 10px;
	margin-left: 10px;

	display: inline-block;

	width: 120px; height: 120px;
	vertical-align:top;

	border: 1px solid #d81f70;
}



#replay{

	color: #fbd242;

	width: 20px;

	display:block;

	margin-left: auto;
	margin-right: auto;
	margin-top: 10px;
}
.gridElement{
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	padding: 0 !important;
}
      <link href="https://fonts.googleapis.com/css?family=Passion+One" rel="stylesheet">
		<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

		<script src="https://use.fontawesome.com/ca5f7b6f9a.js"></script>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>


<div class="container text-center">

		<div id="title">
			TIC-TAC-TOE
		</div>

		<div id="textContainer">

		</div>



	</div>

      【讨论】：

        【解决方案4】：

        您想摆脱填充并设置行高和文本对齐方式

        #gridContainer > div {
    line-height: .8em;  /* something like this */
    text-align: center;
    /* rest of the code minus the padding */
}

        【讨论】：

          猜你喜欢
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 2018-06-09
          相关资源
          最近更新 更多
          热门标签
          Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode