html - 在父元素上使用 % 值时子元素未对齐

Question

我在使用 % 值而不是 px 时遇到问题。例如： http: //jsfiddle.net/FXZMS/1/按我想要的方式工作。将鼠标悬停在“关于”上会显示一个下拉列表。但是，我更喜欢使用 % 值，以便列表项之间的间距取决于屏幕大小。

我尝试使用 10% 的值进行操作，结果如下：http: //jsfiddle.net/FXZMS/2/

在上面的例子中，我要改变的是：

#navcontainer ul a {
    border: 1px solid #000;
    display: inline-block;
    padding-right: 10%;
    padding-left: 10%;
}

在第一个示例中，填充值为 56px，在第二个示例中 - 10%

使用 % 值，将鼠标悬停在“关于”上时，下拉列表看起来......很奇怪。有人能告诉我为什么会发生这种情况吗？

score 0 · Accepted Answer

尝试这个：

添加了 CSS

#navlist > li > a {
    padding-right: 4.5%;
    padding-left: 4.5%;
}

#navlist ul {
    width:100%;
}

演示

我没有更改您的 CSS，只是在您的 CSS 下方添加了这个，您可能想在您的 CSS 中替换上面添加的部分

score 0 · Accepted Answer

为什么不将菜单元素设置width:25%为子元素并对其执行相同的操作。添加text-align: center，它应该看起来漂亮而统一。