html - 从字体真棒图标中删除底部填充
问题描述
我正在尝试从字体真棒图标中删除底部填充。我尝试了这个答案,但没有成功。
这是一个例子。由于这种填充,我在两个表格行之间有一个不需要的间距(参见示例)。
table {
width: 100%;
table-layout: fixed;
}
.firstrow > td {
padding-top: 10px;
}
.datarow > td > div {
overflow: hidden;
padding-top: 5px;
font-size: 16px;
}
.datarow > td > div > div {
float: left;
padding-right: 5px
}
<script src="https://kit.fontawesome.com/de750115f0.js" crossorigin="anonymous"></script>
<table>
<tr class="dx-theme-accent-as-text-color" style="font-weight: bold">
<td>{{frc.version}}</td>
</tr>
<tr class="firstrow">
<td>VA</td>
<td>BA</td>
<td>Bevétel</td>
</tr>
<tr class="datarow">
<td>
<div>
<div>-10,25M€</div>
<i class="fas fa-sort-up" style="font-size: 32px; color: #5cb85c;"></i>
</div>
</td>
<td>
<div>
<div>-20,99M€</div>
<i class="fas fa-sort-up" style="font-size: 32px; color: #d9534f;"></i>
</div>
</td>
<td>
<div>
<div>175,52M€</div>
<i class="fas fa-sort-up" style="font-size: 32px; color: #5cb85c;"></i>
</div>
</td>
</tr>
<tr>
<td>
<div style="overflow: hidden; font-size: smaller;">
<div style="float: left; color: #5cb85c">+0,45</div>
<div style="float: left; padding: 0px 2px 0px 2px">/</div>
<div style="float: left; color: #5cb85c">+1,25%</div>
</div>
</td>
<td></td>
<td></td>
</tr>
</table>
我该如何解决?
编辑:最初我将所有代码添加到一个片段中,但后来抱怨说,帖子只是代码。所以现在我要添加这个文本,希望它就足够了。我明白,SO 有一些规则,但在过去我厌倦了它。我用示例发布了一个完整的问题,但这还不够好。
解决方案
问题不在于填充。图标占据了所有空间。使用绝对定位
table {
width: 100%;
table-layout: fixed;
}
.firstrow > td {
padding-top: 10px;
}
.datarow > td > div {
overflow: hidden;
padding-top: 5px;
font-size: 16px;
}
.datarow > td > div > div {
float: left;
padding-right: 5px
}
<script src="https://kit.fontawesome.com/de750115f0.js" crossorigin="anonymous"></script>
<table>
<tr class="dx-theme-accent-as-text-color" style="font-weight: bold">
<td>{{frc.version}}</td>
</tr>
<tr class="firstrow">
<td>VA</td>
<td>BA</td>
<td>Bevétel</td>
</tr>
<tr class="datarow">
<td>
<div>
<div style='position:relative'>-10,25M€
<i style='position:absolute;right:-25%;font-size: 32px; color: #5cb85c;' class="fas fa-sort-up" ></i></div>
</div>
</td>
<td>
<div>
<div style='position:relative'>-20,99M€
<i class="fas fa-sort-up" style='position:absolute;right:-25%;font-size: 32px; color:#d9534f;'></i></div>
</div>
</td>
<td>
<div>
<div style='position:relative'>175,52M€
<i class="fas fa-sort-up" style='position:absolute;right:-25%;font-size: 32px; color: #5cb85c;' ></i>
</div></div>
</td>
</tr>
<tr>
<td>
<div style="overflow: hidden; font-size: smaller;">
<div style="float: left; color: #5cb85c">+0,45</div>
<div style="float: left; padding: 0px 2px 0px 2px">/</div>
<div style="float: left; color: #5cb85c">+1,25%</div>
</div>
</td>
<td></td>
<td></td>
</tr>
</table>
推荐阅读
- vim - 在其他行 vim 的末尾放置选择的抽出的行
- objective-c - 使用 MapKit,MKMapview 如何通过在屏幕上垂直对齐两个坐标来定位地图
- kafka-python - 如何使用 ssl 配置创建 Kafka-python 生产者
- python - 为 pandas 数据框的每个 id 替换列中序列的缺失值
- python - 卷积层中的偏差真的会对测试精度产生影响吗?
- apache-kafka - 如何获取 Kafka 流聚合任务的结果并将数据发送到另一个服务?
- javascript - 当我尝试在 app-module 中导入 javascript 文件时,ng build --prod 失败
- java - 我在 NetBeans IDE 中的输出问题
- .htaccess - 指定并测试 htaccess HTTP_ACCEPT
- vue.js - 属性或方法“$v”未使用 Vuelidate 定义