终于把我的导航栏放到了中心......现在我的效果不起作用了

Question

所以我开始浮动我的li项目并使用属性display：inline;但我不能把它放在中心位置。然后我通过删除浮动并使用text-align和display：inline-block在堆栈交换上找到了解决方案。但是现在我的效果不起作用了！是否无法将菜单置于中心位置，并且在悬停时仍然可以将列表链接旋转？或者它是一种情况还是某种情况？谢谢你的帮助！

ul {
	text-align:center;
}
li {
	list-style:none;
	margin-right:1em;
	font-family:'Special Elite', cursive;
	font-size:25px;
	padding:12px;
	display:inline-block;
}
li a {
	color:#D0903C;
	background-color:#7A4909;
	text-decoration:none;
}
.left a:hover {
	color:#7A4909;
	background-color:#D0903C;
	-webkit-transform:rotate(-10deg) scale(1.2);
	   -moz-transform:rotate(-10deg) scale(1.2);
	     -o-transform:rotate(-10deg) scale(1.2);
	text-transform:uppercase;
}
.right a:hover {
	color:#7A4909;
	background-color:#D0903C;
	-webkit-transform:rotate(10deg) scale(1.2);
	   -moz-transform:rotate(10deg) scale(1.2);
	     -o-transform:rotate(10deg) scale(1.2);
	text-transform:uppercase;
}

<ul class="navbar">
  <li class="left"><a href="home.html">Home</a></li>
  <li class="right"><a href="contact.html">Contact Me</a></li>
  <li class="left"><a href="blog.html">Blog</a></li>
  <li class="right"><a href="funny.html">Funny</a></li>
</ul>

Answer 1

您需要将锚元素设置为内联块。

＆＃13;

＆＃13;

ul {
	text-align:center;
}
li {
	list-style:none;
	margin-right:1em;
	font-family:'Special Elite', cursive;
	font-size:25px;
	padding:12px;
	display:inline-block;
}
li a {
	color:#D0903C;
	background-color:#7A4909;
	text-decoration:none;
    display: inline-block;

}
.left a:hover {
	color:#7A4909;
	background-color:#D0903C;
	-webkit-transform:rotate(-10deg) scale(1.2);
	   -moz-transform:rotate(-10deg) scale(1.2);
	     -o-transform:rotate(-10deg) scale(1.2);
	text-transform:uppercase;
}
.right a:hover {
	color:#7A4909;
	background-color:#D0903C;
	-webkit-transform:rotate(10deg) scale(1.2);
	   -moz-transform:rotate(10deg) scale(1.2);
	     -o-transform:rotate(10deg) scale(1.2);
	text-transform:uppercase;
}

＆＃13;

<ul class="navbar">
  <li class="left"><a href="home.html">Home</a></li>
  <li class="right"><a href="contact.html">Contact Me</a></li>
  <li class="left"><a href="blog.html">Blog</a></li>
  <li class="right"><a href="funny.html">Funny</a></li>
</ul>

＆＃13;

＆＃13;

＆＃13;