html - 购物车样式 - 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

这是解决方案。

问题是您在 .cart-counter 类上使用了属性 right，这使得内容从右向左增长。你需要让它向后，从左到右。

现在，下次请正确提供代码，我必须弄清楚您为购物车图标 (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;
}