我的填充隐藏输入混乱

我有一个<li> 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; 
}

来源

2017-03-02 Pontus Svedberg

如果我删除空格，这样它就像在你的jsfiddle blah那么似乎工作确定 – PhilS

从我的意见继，如果添加空格：NOWRAP;应该修复它

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

来源

2017-03-02 11:52:57 PhilS

真棒！谢谢一堆！ –

我试过不同的方法使用你的代码（见演示）。

希望这会有所帮助！

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

来源

2017-03-02 12:19:48

我的填充隐藏输入混乱

回答

相关问题