Question

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

＆＃34;总计＆＃34;看起来正常因为我删除了那里隐藏的输入只是为了显示，但在其他方面，当点击时，边框底部停在右侧文本所在的位置，所以填充有点混乱，这可以修复吗？

代码：

<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;
}

Answer 2

我尝试了使用您的代码的不同方法（请参阅演示）。

希望这有帮助！

loop

$(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;
}

我的填充隐藏输入混乱

2 个答案: