隐藏的输入混乱与我的填充物混乱

Question

我有一个带有4个可单击按钮的<li>，我的下面也有一个边框显示，当它单击时，我也在其中隐藏了一个输入，但由于我的右边弄乱了它填充，请参阅此小提琴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>