购物车样式 - CSS行为

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;
}