Question

我具有以下display:table结构，并且在div display: table-cell中将table-row设置为display:table-row的div中有两个跨度，如下所示：

<div class="table">
    <div class="table-row1">
        <span class="table-cell">text1</span>
        <span class="table-cell">text2</span>
    </div>
    <div class="table-row2">
        <span class="table-cell">text1</span>
        <span class="table-cell">text2</span>
    </div>
</div>

我希望在table-row2 div的text1 span中显示一个图标作为背景图像。跨度中的文本长度是动态的。我希望图标与文本的开头对齐。任何帮助表示赞赏。

text1的跨度具有以下CSS：

{
    display: table-cell;
    vertical-align: middle;
    text-align: right;
    width:50%;
}

该图标也是有条件的，并且根据接收到该组件的数据，不同的图标会在不同的条件下显示。

Answer 1

使用图标<i>元素，然后将背景图像添加到before伪元素中，如下所示：

i::before {
  content: url(path_to_file.ext);
  display: inline-block;
}

在i元素中，确保定义宽度和高度。由于您将通过CSS添加内容，因此需要设置固定尺寸值。此外，出于对齐目的，最好像下面这样使用flex：

i {
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
}

将范围内的背景图像与显示为表格单元格对齐

1 个答案: