删除“材质”图标和周围div之间的空间

我正在尝试删除我正在用作可拖动元素上的关闭图标的材质图标周围的环。

这是元素的图片(为了将问题突出显示,我将背景更改为红色),我想删除红色的外部圆圈,以便元素的漂亮边框一直延伸到元素的边缘灰色圆圈:

删除“材质”图标和周围div之间的空间

以下是元素和图标的HTML和CSS:

HTML:

<div class="print-element">
  Tag Number
  <mat-icon class="resize-circle">highlight_off</mat-icon>
</div>

CSS:

.print-element {
    min-width: 175px;
    min-height: 45px;
    border: solid 1px #ccc;
    color: rgba(0,0.87);
    display: inline-flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    background: #fff;
    border-radius: 4px;
    margin-right: 25px 25px 15px 0px;
    cursor: move;
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    padding: 10px 50px 10px 10px;
    transition: box-shadow 200ms cubic-bezier(0,0.2,1);
    box-shadow: 0 3px 1px -2px rgba(0,0.2),0 2px 2px 0 rgba(0,0.14),0 1px 5px 0 rgba(0,0.12);
  }

  .resize-circle{
    position: absolute;
    top: -10px;
    right: -10px;
    background-color: white;
    border: .1px solid white;
    border-radius: 50%;
    color: #aaa;
    cursor: pointer;
  }

.mat-icon {
    background-repeat: no-repeat;
    display: inline-block;
    fill: currentColor;
    height: 24px;
    width: 24px;
}

现在我可以更改mat-icon的大小,但是结果如下:

使用:

.mat-icon {
    background-repeat: no-repeat;
    display: inline-block;
    fill: currentColor;
    height: 20px;
    width: 20px;
}

产量:

删除“材质”图标和周围div之间的空间

这里已经完成了所有的准备工作,准备就绪:https://stackblitz.com/edit/angular-m7wwvr?file=src%2Fstyles.scss

这就是我想要的样子:

删除“材质”图标和周围div之间的空间

即使指针指向正确的方向也会有所帮助。

iCMS 回答:删除“材质”图标和周围div之间的空间

检查已编辑的URL是否有HTML和CSS的更改 https://stackblitz.com/edit/angular-m7wwvr-xrmyje?file=src/styles.scss

,

好的,这是一个答案。我用@Srinivas Bendkhale的答案来达到这个结果。

我所做的就是用icon包裹span并给它修复hightwidth,然后我要做的就是隐藏{{1 }}。

这就是我浏览器中的外观。 result

overflow 
.print-element {
  min-width: 175px;
  min-height: 45px;
  border: solid 1px #ccc;
  color: rgba(0,0.87);
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  background: #fff;
  border-radius: 4px;
  margin-right: 25px 25px 15px 0px;
  cursor: move;
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  padding: 10px 50px 10px 10px;
  transition: box-shadow 200ms cubic-bezier(0,0.2,1);
  box-shadow: 0 3px 1px -2px rgba(0,0.2),0 2px 2px 0 rgba(0,0.14),0 1px 5px 0 rgba(0,0.12);
}

.resize-circle {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  background-color: white;
  border: .1px solid white;
  color: #aaa;
  cursor: pointer;
}

span {
  width: 20px;
  height: 20px;
  background: white;
  position: absolute;
  top: -7px;
  border-radius: 50%;
  right: -7px;
  overflow: hidden;
}

本文链接:https://www.f2er.com/1607692.html

大家都在问