子元素在它应该的时候不会反对

Question

我有一个我想要歪斜的导航栏，但只是条形而不是条形图。 所以，我倾斜主导div（导航栏），并将其负值倾斜到文本。

然而，文本仍然没有解开。

这是如何运作的？

body
			{
			background-color: rgb(21,14,43);
			background-image: url("../images/backgroundimage.jpg");
			background-size: cover;
			background-repeat: no-repeat;
			background-attachment: fixed;
			min-height: 100%;
			background-position: center center;
			overflow: hidden;
			}
	
#navbarbox			
			{
			clear: both;
			display: block;
			width: 80vw;
			height: 3.5vw;
			margin: auto;
			padding: 0.5vw 0 0 0;
			}
#navbar, #navbar ul
			{
			width: 70vw;
			height: 3.5vw;
			display: flex;
			padding: 0 0 0 0;
			}
			
#navbar span
			{
			height: 3.5vw;
			transform: skewX(15deg); /*This is supposed to un-skew, but doesn't work!*/
			}
			
#navbar li
			{
			color: white;
			list-style: none;
			display: inline-block;
			padding: 0.8vw 3vw 0 3vw;
			text-align: center;
			color: red;
			font-size: 2vw;
			font-family: Jura;
			height: 2.5vw;
			transform: skewX(-15deg);
      background-color: green;
			}

<!--navigation barrrrrr-->
<div id="navbarbox">
	<ul id="navbar">
		<a href="default.html"><li style="background-color: purple;"><span>Home</span></li></a>
		<a href="servers.html"><li id="server"><span>Servers</span></li></a>
		<a href="community.html"><li id="community"><span>Community</span></li></a>
		<a href="store.html"><li id="store"><span>Store</span></li></a>
		<a href="downloads.html"><li id="downloads"><span>Downloads</span></li></a>
		<a href="contact.html"><li id="contact"><span>Contact</span></li></a>
	</ul>
</div>

</body>

Answer 1

转换对onClick元素没有影响，因为它显示为span。您需要将其设置为显示为块：

inline

＆＃13;

＆＃13;

#navbar span {
  display: block; /* or inline-block */
}

＆＃13;

body
			{
			background-color: rgb(21,14,43);
			background-image: url("../images/backgroundimage.jpg");
			background-size: cover;
			background-repeat: no-repeat;
			background-attachment: fixed;
			min-height: 100%;
			background-position: center center;
			overflow: hidden;
			}
	
#navbarbox			
			{
			clear: both;
			display: block;
			width: 80vw;
			height: 3.5vw;
			margin: auto;
			padding: 0.5vw 0 0 0;
			}
#navbar, #navbar ul
			{
			width: 70vw;
			height: 3.5vw;
			display: flex;
			padding: 0 0 0 0;
			}
			
#navbar span
			{
            display: block;
			height: 3.5vw;
			transform: skewX(15deg);
			}
			
#navbar li
			{
			color: white;
			list-style: none;
			display: inline-block;
			padding: 0.8vw 3vw 0 3vw;
			text-align: center;
			color: red;
			font-size: 2vw;
			font-family: Jura;
			height: 2.5vw;
			transform: skewX(-15deg);
      background-color: green;
			}

＆＃13;

＆＃13;

＆＃13;