图片后文本缩进

Question

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

这是 fiddle，说明了我的问题：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;
}

非常感谢您的帮助！

Answer 1

如果您当前的标记不重要 (image+span)，那么您可以使用带有自定义 list-style-image 的 <ul>。

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

https://jsfiddle.net/scoa8npd/1/

Answer 2

您可以将 span 设为 inline-block，然后 margin-left 将正确移动所有行。

Example

代码：

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

}

Answer 3

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

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