Question

我正在尝试为购物车<div>中包含物品数量的样式设置样式。

我正在尝试根据其内容进行响应。 innerText.length = 0-5应该看起来不错。当项目数等于12345时，它将在购物车图标上移动。它应该向右展开，并且请勿触摸容器中心的图标。

我可以使用具有依赖性（更多字符=较小的字体大小）的纯JS来实现，但我想在CSS中实现。

代码如下：

.cart-box {
        display: inline-block;
        position: relative;

        .cart-image {
          width: 55px;
          height: 50px;
          border-radius: 3px;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 20px;
          i {
            margin-right: 5px;
          }
        }
        .cart-counter {
          min-width: 28px;
          padding: 0 4px;
          height: 27px;
          border-radius: 14px;
          display: flex;
          align-items: center;
          justify-content: center;
          color: rgb(224, 227, 237);
          position: absolute;
          top: 50%;
          right: 0;
          transform: translate(50%, -50%);
          font-size: 14px;
        }
      }

<a href="#" class="cart-container">
  <div class="cart-image">
   <i class="shopping-basket-icon"></i>
  </div>
  <div class="cart-counter">123</div>
</a>

我正在考虑使用nowrap将文本溢出到省略号。

Answer 1

这是解决方案。

问题是您正在使用right类上的属性.cart-counter，这会使内容从右向左扩展。您需要使它从左到右向后移动。

现在，下一次请正确提供代码，我必须找出您要用于该购物车图标（FontAwesome）的图标库以及HTML上缺少的div。

现在是HTML和CSS（可以随意设置为SCSS）。

HTML：

<div class="cart-box">
  <a href="#" class="cart-container">
    <div class="cart-image">
      <i class="fas fa-shopping-basket"></i>
      <div class="cart-counter">123</div>
    </div>
  </a>
</div>

CSS：

.cart-box {
  display: inline-block;
  position: relative;
  background: #723636;
  padding: 15px;
}

.cart-image {
  width: 55px;
  height: 50px;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  background: #D58E32;
  position: relative;
}

i {
  margin-right: 5px;
  color: white;
}

.cart-counter {
  padding: 0 4px;
  height: 37px;
  border-radius: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgb(224, 227, 237);
  position: absolute;
  top: 50%;
  left: 70%;
  transform: translate(0%, -50%);
  font-size: 14px;
  font-weight: bold;
  font-family: sans-serif;
}

购物车样式-CSS行为

1 个答案: