Question

使用任何图标库中的字体超棒的V形人字形图标或向右箭头图标，我该怎么做，以使图标的点触及div的边缘，使其完美。

请参见下面的代码示例，并注意即使我正在执行文本对齐方式也是如此：它不能完全碰到侧边栏的边缘。我相信这是因为图标右侧有少量间距。无论如何，我可以控制这一点距离吗？

.wrapper {
  height: 100vh;
  display: flex;
  flex-direction: row;
}

.sidebar {
  flex: 00 50px;
  background-color: #ccc;
  text-align: right;
}
.content {
  flex: 1;
  background-color: #000;
}

<link href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" rel="stylesheet"/>
    <div class="wrapper">
          <div class="sidebar">
      <i class="fas fa-chevron-right"></i>
    </div>
    <div class="content">
      
    </div>
    </div>

Answer 1

这应该为您做！基本上，创建一个类.fa-chevron-right并为其提供margin-right: -2px;

您可以增加/减少-2px以获得所需的间距！

.wrapper {
  height: 100vh;
  display: flex;
  flex-direction: row;
}

.sidebar {
  flex: 00 50px;
  background-color: #ccc;
  text-align: right;
}
.content {
  flex: 1;
  background-color: #000;
}
.fa-chevron-right {
  margin-right: -2px; 
}

<link href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" rel="stylesheet"/>
    <div class="wrapper">
          <div class="sidebar">
      <i class="fas fa-chevron-right"></i>
    </div>
    <div class="content">
      
    </div>
    </div>

使右V形字体超赞图标的提示触及div的结尾

1 个答案: