所以我在 WordPress 中遇到了一个非常奇怪的问题。
在初始加载主页时,布局符合要求。带有一些填充的间隔 li 元素。然而,这在某种程度上是不一致的......
如果我导航到标题中的另一个页面,则 li 元素的布局会有所不同。没有填充物,所有东西都挤在一起。然而!然后,如果我刷新页面,元素将再次符合要求。
导航回主页,它们又坏了。刷新,瞧,它们很好。我完全不明白这种矛盾。
我想这与填充一开始不重叠但后来不知何故重叠有关。
这是 HTML:
<nav>
<div>
<ul>
<li><a href="#">Home</a>
</li>
<li><a href="#">about</a>
</li>
<li><a href="#">Balls</a>
</li>
<li><a href="#">what</a>
</li>
</ul>
</div>
这是 CSS:
nav {
padding: 2% 2% 0 2%;
background-color: #7DCBE2;
}
nav>div {
margin-left: 20%;
display: inline-block;
text-align: center;
}
nav li {
display: inline-block;
margin: 5px;
}
nav li a {
padding: 0 20%;
color: white;
text-decoration: none;
font-size: 20px;
border: 1px solid black;
}
这是 JSFiddle 问题的副本:
https://jsfiddle.net/4z1yz3g0/
我添加了边框以更清楚地看到填充重叠,但我不明白为什么。
提前感谢您的帮助。
最佳答案
尝试使用 px 而不是 %
nav {
padding: 2px 2px 0 2px;
background-color: #7DCBE2;
}
nav>div {
margin-left: 20px;
display: inline-block;
text-align: center;
}
nav li {
display: inline-block;
margin: 5px;
}
nav li a {
padding: 0 20px;
color: white;
text-decoration: none;
font-size: 20px;
border: 1px solid black;
}
IMO 有更好的结果
关于css - WordPress 中的导航不一致,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29684225/