Question

我正在制作包含一些菜单项的导航菜单。理想情况下，当用户选择一个项目时，我希望菜单项左侧显示橙色边框。我的代码在这里：

<menu>
  <div style="margin-left: -12px; padding-bottom: 10px;">
    <menu_item ng-class="<<show orange border css class:updateBorderItem>>"> </menu-item>
    <menu_item >
        <a ng-click="panel.selectItem(1)" ng-class="'menu_item'" ng-href="www.google.com">Go to Google</a>
    </menu_item>
</div>

... Other items.

基本上，一个“div”中有2个菜单项代表一个菜单项。只有当用户点击此菜单项1时，才会显示第一项。

问题是，当用户点击它时，措辞会向右移动一点，当用户选择其他菜单项时，措辞会向左移动一点点。

在：

 Go To Google

后：

 | Go To Google

选择其他项目：

 Go To Google

我希望措辞根本不动。我该怎么办？

  My css:

.updateBorderItem {
    border-left: 3px solid orange;
    padding-left: 8px;
}

Answer 1

您可以为默认菜单项设置透明值，如：

menu > div {
  display: inline-block;
}
menu > div > menu_item {
  border-left: 3px solid #fff;
  padding-left: 8px;
}
menu > div > menu_item:hover {
  border-left: 3px solid orange;
}

JSFiddle

修改

OnClick事件jQuery更改所选的menu_item：JSFiddle

删除左边框后如何防止文字向左移动？

1 个答案: