Question

我正在制作网上商店并遇到了一些奇怪的错误。

我正在努力制作购物车＆＃34;徽章＆＃34;轻松查看购物车中有多少件商品。它是一个自适应网站，徽章位于a标记内，内部有两个display: block范围。在桌面端，徽章css看起来像这样：

.count::after{
  content: "2";
  display: inline-block;
  background: #FF0000;
  border-radius: 20%;
  padding: 0 0.5em;
  transform: scale(0.7);
  color: #FFF;
  float: right;
  position: absolute;
  top: 5px;
  right: 1.5em;
}

.count::after:empty{
  display: none;
  padding: 0
}

哪个工作正常，徽章显示在右上角。但是在移动设备上，a标签包装器会全宽，使用上面的css会导致徽章飞到屏幕一侧。

因此我编写了以下移动代码：

@media max-width: 990px{
    ...
    .count::after{
        position: relative;
        top: -90%;
        right: 0;
    }

}

然而。 top: -90%没有正确注册。如果我进入开发工具并将其关闭然后打开，它就能完美运行。但如果我刷新它会直接回到图标的底部。

令人讨厌的部分：here

Answer 1

我同意Shahil，您应该将position:relative设置为包含.count类的元素，并将position:absolute和top:-5px（让我们说）设置为.count::after < / p>

像这样：

.d-block{
  display: block;
}
.d-inline_block{
  display: inline-block;
}
.t-center{
  text-align: center;
}
.menu{
  width:100%;
  text-align: center;
}
.count {
  position:relative;
}
.count::after{
  content: "2";
  display: inline-block;
  background: #FF0000;
  border-radius: 20%;
  padding: 0 0.5em;
  transform: scale(0.7);
  color: #FFF;
  float: right;
  position: absolute;
  top: -5px;
  right: 0;
}

<div class="col-xs-12 col-md-4 my-auto menu t-right">
                <a href="/account/login" class="d-inline_block headerLink">
                  <i class="fa fa-lg fa-user d-block t-center py-8">icon</i>
                  <span class="d-block t-center">Min konto</span>
                </a>
                <a href="/pages/kundeservice" class="d-inline_block headerLink"><i class="fa fa-lg fa-question d-block t-center py-8">icon</i><span class="d-block t-center">Kundeservice</span></a>
                <a href="/cart" class="d-inline_block headerLink count"><i class="fa fa-lg fa-shopping-cart d-block t-center py-8">icon</i><span class="kurv d-block t-center">Min kurv</span></a>
              </div>

这应该适用于桌面和移动设备而不使用@media查询

CSS顶部位置需要手动刷新

1 个答案: