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%

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

Answer 1

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