html - 隐藏的输入弄乱了我的填充

Question

我有一个 <li>有 4 个可点击按钮，我在它下面还有一个边框，当它被点击时显示，我也在那里隐藏了一个输入，但是它弄乱了我的右填充，看到这个 fiddle https://jsfiddle.net/9qy53L32/

它在“total”上看起来很正常，因为我删除了那里的隐藏输入只是为了显示，但在其他人身上，当点击时，边框底部停在文本在右侧的位置，所以填充有点搞砸了，这能修好吗？

代码:

<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

根据我的评论，如果您添加 white-space: nowrap;应该修复它

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