时间戳

首页 > 解决方案 > 边框使 li 内的内容移位

javascript - 边框使 li 内的内容移位

问题描述

每当我选择一个 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>

标签： javascriptjqueryhtmlcss

解决方案

您也许还可以将box-sizingcss 属性更改为border-box. 这会将边框（和填充）计为宽度和高度的一部分，在添加边框时保持它们相同。

box-sizing 属性可用于调整此行为：

content-box为您提供默认的 CSS 框大小行为。如果将元素的宽度设置为 100 像素，则元素的内容框将是 100 像素宽，并且任何边框或填充的宽度都将添加到最终渲染的宽度中。

border-box告诉浏览器在您为元素的宽度和高度指定的值中考虑任何边框和填充。如果您将元素的宽度设置为 100 像素，则该 100 像素将包括您添加的任何边框或填充，并且内容框将缩小以吸收额外的宽度。这通常会使调整元素大小变得容易得多。

来源：https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

推荐阅读