如何在刪除左邊框後防止文字左移？

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