为什么我的文字在这里向左移？

Question

我正在尝试创建一个CSS菜单栏。

这是Fiddle link

现在，请注意我添加ul的第一个菜单项（画笔）并将其赋予submenu类，文本向左移动。对于底部两个，它在中间对齐。为什么会发生这种情况？如何解决这个问题？ 我希望所有的menuItem文本在添加subMenus之后在中间对齐。

Answer 1

原因.menuItems的宽度不是100%。如果它更改为100%，则可以正常使用。

以下是WORKING SOLUTION

代码更改：

.menuItems{
width: 100%;
}

与.menuItems:hover

相同

Answer 2

将width: 100%设置为.menuItems可能会对效果造成伤害。只需从width: inherit;选择器中删除.menuItems a。

<强> JsFiddle Demo

Answer 3

如果我理解你，这可以帮助你：

.menuItems a {
display: block;
line-height: 40px;
height: inherit;
width: inherit;
text-align: center;
}

Answer 4

主要问题是页面中的“SUBMENU”元素。 需要spase并将画笔菜单推到左侧

尝试解决推杆：

.menuItems{
width: 100%;
}

和

.menuItems:hover{
width: 110%; /*example*/
}

希望很有帮助......