css - 图像后文本缩进

Question

我正在尝试缩进包含在<span>标签中的文本。
由于图像，第一行向右移动，我希望以下行以与第一行相同的缩进开始。

这是小提琴，说明了我的问题：https

://jsfiddle.net/scoa8npd/ 这是我的简单代码：

HTML

<img src="https://schwesidesign.com/active.gif" class="cross" /><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>

CSS

.cross { padding-right: 5px; }

span {
  margin-left: 10px;
  text-indent: -10px;
}

非常感谢您的帮助！

score 2 · Accepted Answer

您可以使spananinline-block然后margin-left正确移动所有行。

代码：

span {
    margin-left: 10px;
    display: inline-block;
    width: calc(100% - 40px);
    vertical-align: top;

}

score 1 · Accepted Answer

如果您当前的标记不重要 ( image+ span)，那么您可以使用 a <ul>with custom list-style-image。

ul {
    list-style-image: url('https://schwesidesign.com/active.gif');
}

score 1 · Accepted Answer

使用float:left和margin-bottom交叉 div：

.cross {
    padding-right: 5px;
    float: left;
    margin-bottom: 60px;
}

3 回答 3