隠し入力が私の詰め物でつまむ

Question

私はに4つのクリック可能なボタンがあります。また、クリックしたときに表示される境界線も表示されています。このフィドルを参照してくださいhttps://jsfiddle.net/9qy53L32/

私は表示するだけで隠れた入力を削除したので、それは正常であるように見えますが、他のものは、クリックすると、テキストが右側にあるのでパディングはちょっと台無しですが、これは修正できますか？

コード：

<div class="holdLiftMenu"> 
    <ul class="holdLiftMenuUL"> 
     <li class="holdLiftMenuLI"> 
     <a class="holdLiftMenuA total current">Total 
      <input type="hidden" name="hid4" id="hid4" value="4" /> 
     </a> 
     </li> 
     <li class="holdLiftMenuLI"> 
     <a class="holdLiftMenuA squat">Squat 
      <input type="hidden" name="hid1" id="hid1" value="" /> 
     </a> 
     </li> 
     <li class="holdLiftMenuLI"> 
     <a class="holdLiftMenuA benchpress">Benchpress 
      <input type="hidden" name="hid2" id="hid2" value="" /> 
     </a> 
     </li> 
     <li class="holdLiftMenuLI"> 
     <a class="holdLiftMenuA deadlift">Deadlift 
      <input type="hidden" name="hid3" id="hid3" value="" /> 
     </a> 
     </li> 
    </ul> 
</div> 

スクリプト

$(document).ready(function() { 
    $('.holdLiftMenu li a').on('click', function() { 
     $('li a.current').removeClass('current'); 
     $(this).addClass('current'); 
    }); 
}); 

CSS

.holdLiftMenu { 
    margin-top: 10px; 
    background-color: white; 
    padding: 10px; 
} 

.holdLiftMenuUL { 
    margin:0; 
} 

.holdLiftMenuLI { 
    display:inline-block; 
} 

.holdLiftMenuA { 
    background-color:white; 
    padding: 10px; 
    cursor:pointer; 
    color: black; 
    font-weight:700; 
    font-size: 16px; 
    text-align:center;  
} 

.current { 
    border-bottom: 3px solid red; 
} 

Answer 1

あなたは空白追加した場合、私のコメントに続き：NOWRAPを。それを修正する必要があります

.holdLiftMenuA { 
    background-color:white; 
    padding: 10px; 
    cursor:pointer; 
    color: black; 
    font-weight:700; 
    font-size: 16px; 
    text-align:center; 
    white-space: nowrap; 
} 

Answer 2

私はあなたのコード（デモを参照してください）を使用して別のアプローチを試みました。

希望すると便利です。

$(document).ready(function() { 
 
    $('ul li a').on('click', function() { 
 
    $('li a.current').removeClass('current'); 
 
    $(this).addClass('current'); 
 
    }); 
 
});

div ul { 
 
    margin: 0px; 
 
    padding: 0px; 
 
} 
 

 
div ul li { 
 
    display: inline-block; 
 
    margin-right: 20px; 
 
} 
 

 
div ul li a { 
 
    display: inline-block; 
 
    padding: 10px 0px; 
 
    text-decoration: none; 
 
    color: #000; 
 
} 
 

 
div ul li input { 
 
    display: none; 
 
} 
 

 
.current { 
 
border-bottom: 3px solid red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <ul> 
 
    <li> 
 
    <a href="#">Total</a> 
 
    <input type="text"> 
 
    </li> 
 
    <li> 
 
    <a href="#">Squat</a> 
 
    <input type="text"> 
 
    </li> 
 
    <li> 
 
    <a href="#">Benchpress</a> 
 
    <input type="text"> 
 
    </li> 
 
    <li> 
 
    <a href="#">Deadlift</a> 
 
    <input type="text"> 
 
    </li> 
 
    </ul> 
 
</div>