<分区>
标签 javascript jquery html css
<分区>
每当我选择一个 li 时，我都会创建一个函数，使边框为白色。但是，边框会将框内的内容移动几个像素。我怎样才能防止这种情况发生？
$("ul.quantity-grid li").click(function() {
$(this).addClass("active").siblings().removeClass("active");
});.quantity-grid {
list-style-type: none;
color: #fff;
margin: 5% auto;
padding-left: 0px;
width: 40vw;
height: 50vh;
text-align: center;
display: grid;
grid-template-columns: 50% 50%;
grid-column-gap: 1em;
grid-row-gap: 1em;
overflow: hidden;
}
.quantity-grid li {
font-family: "calibreb";
font-size: 40px;
color: #fff;
background-color: rgba(0, 0, 0, 0.05);
overflow: hidden;
border: none;
}
.quantity-grid li h3 {
margin: 10% 0 8px 0;
}
.quantity-grid li img {
height: 60%;
padding-top: 8%;
}
.quantity-grid li.active {
border: 4px solid #fff;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="quantity-grid">
<li class="1bag" data-value="1">
<h3>1 BAG, $35</h3>
<img src="img/1bag.png">
</li>
<li class="2bags" data-value="2">
<h3>2 BAGS, $45</h3>
<img src="img/2bags.png">
</li>
<li class="3bags" data-value="3">
<h3>3 BAGS, $65</h3>
<img src="img/3bags.png">
</li>
<li class="4bags" data-value="4">
<h3>4 BAGS, $55</h3>
<img src="img/4bags.png">
</li>
</ul>最佳答案
边框增加了内容框的整体宽度，因此它会移动元素。你需要让非 .active 有 margin: 4; 来对抗 4px;由边框切换进出 View 。
关于javascript - 边框使 li 内的内容移位，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50241525/