css - WordPress 中的导航不一致

Question

所以我在 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/

我添加了边框以更清楚地看到填充重叠，但我不明白为什么。

提前感谢您的帮助。

Answer 1

尝试使用 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 有更好的结果