CSS定位不起作用，我做错了什么？

Question

我一直在观看关于jQuery的教程，他之前已经制作了css文件但是他的输出看起来与我下载文件时的输出不同

他的： The way it should be

矿：

代码：

 #navArrows {
position: relative;
width: 150px;
height: 150px;
margin: 100px auto 0;
background: #333;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
padding: 20px;
}

.navigationArrow {
    width: 50px;
    height: 50px;
    line-height: 50px;
    padding: 0;
    margin: 0;
    position: absolute;
    top: 20px;
    left: 20px;
    background: white;
    color: #222;
}

#up {
    left: 50%;
    margin-left: -25px;

}

#left, #right {
    bottom: 50%;
    margin-top: -25px;

}
#left, {
    right: 20%;
    left: inherit;

}
#right {
    left: 20%;
    right: inherit;


}


#down {
    bottom: 20px;
    top: inherit;
    left: 50%;
    margin-left: 5px;

}

.box {
    height: 100px;
    width: 100px;
    background: #a7f;
    color: white;
    border: solid 4px #a1f;
    line-height: 100px;
    margin: 100px auto 0;
    opacity: 0.5;


    position: relative;

}

我如何解决此问题，请告诉我。 ps：我添加了原始问题中缺少的一部分代码，希望这会有所帮助。

Answer 1

在#left类尝试将其替换为：

之后，您似乎有一个逗号

#left {
    right: 20%;
    left: inherit;
}

Answer 2

试试这个

#left {
    left: 0;
}

Answer 3

如果你也添加标记会更好。但是请参阅以下示例并根据它进行更正。希望它对你有用。

#navArrows {
		position: relative;
		width: 150px;
		height: 150px;
		margin: 100px auto 0;
		background: #333;
		-webkit-border-radius: 50%;
		-moz-border-radius: 50%;
		border-radius: 100px;
		padding: 20px;
		}
		
		.navigationArrow {
			width: 50px;
			height: 50px;
			line-height: 50px;
			padding: 0;
			margin: 0;
			position: absolute;
			top: 20px;
			left: 20px;
			background: white;
			color: #222;
		}
		
		#up {
			left: 50%;
			margin-left: -25px;
		
		}
		
		#left, #right {
			top: 50%; // One of the key line
			margin-top: -25px;
		
		}
		#right {
			left: auto;
			right: 20px;
		}
		
		
		#down {
			bottom: 20px;
			top: auto;
			left: 50%;
			margin-left: -25px; 
		
		}
		
		.box {
			height: 100px;
			width: 100px;
			background: #a7f;
			color: white;
			border: solid 4px #a1f;
			line-height: 100px;
			margin: 100px auto 0;
			opacity: 0.5;
			position: relative;
		
		}

<div id="navArrows">
	<div class="navigationArrow" id="up"></div>
    <div class="navigationArrow" id="right"></div>
    <div class="navigationArrow" id="down"></div>
    <div class="navigationArrow" id="left"></div>
</div>