css - 绝对定位

Question

在下面的小提琴中，我试图找出为什么放置复选框的 div 大于内容本身（这只是一个空复选框的图像）。我正在尝试完成与提琴手上看到的相同，但没有白色背景在底层边界上的重叠。我认为问题与这种css风格有关：

.selectable-content label:after {
    background: white;
    color: #9fc5e8;
    content:"\f096";
    position:absolute;
}

score 1 · Accepted Answer

您必须在媒体查询中使用一些底部值，但您的白色背景是由于line-height标签上的默认值。

添加：

.selectable-content > label {
    padding-top: -5px;
    font-family:'FontAwesome';
    font-size: 32px;
    cursor: pointer;
    line-height:26px;
}

也弄乱了您的媒体查询。

score 0 · Accepted Answer

尝试设置行高。当我添加行

line-height: 31px

至

.selectable-content > label {...

问题解决了。我最初设置line-height: 32px了，但仍然有一个白色像素。您将需要找到一种一致的方式来定位元素并设置与复选标记字符相关的行高以解决溢出问题。

score 0 · Accepted Answer

创建的元素:after包含字符，但也有白色背景。由于该元素稍后在 DOM 中并位于其父元素的右下角，因此它将与背景重叠。

这可以通过创建实际图像的半透明图片并从 CSS 中删除白色来解决。

3 回答 3