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有更好的结果

WordPress中导航不一致

1 个答案: