Question

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

Answer 1

边框会添加内容框的总宽度，因此会移动元素。您需要使非.active有margin: 4;来对抗4px;正在被边界切换进出视图。

Answer 2

给它一个不可见的边框

.quantity-grid li {
  font-family: "calibreb";
  font-size: 40px;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.05);
  overflow: hidden;
  border: 4px solid transparent;
}

它具有不使用保证金的优点，以防您想要使用保证金进行其他样式。

Answer 3

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

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

内容框为您提供默认的CSS框大小调整行为。如果你设置   一个元素的宽度为100像素，然后元素的内容框将   是100像素宽，任何边框或填充的宽度将是   添加到最终渲染宽度。

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

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

Answer 4

在这些情况下我通常做的是为非活动状态保持透明边框，并添加活动状态的颜色。这将使元素保持原位

＆＃13;

$('ul').on('click', 'li',function(){
  $('li').removeClass('active');
  $(this).addClass('active');
})

＆＃13;

li {
  padding: 0.5rem;
  border: 2px solid transparent;
}

li.active {
  border: 2px solid black;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li> Item One </li>
  <li> Item Two </li>
  <li> Iem Three </li>
</ul>

＆＃13;

边框使内容变换内移

4 个答案: