在父级上使用％值时，子元素未对齐

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，它看起来应该都很漂亮。

Answer 2

试试这个：

添加了CSS

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

#navlist ul {
    width:100%;
}

DEMO

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