图像后的文字缩进

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;
}

非常感谢你的帮助！

Answer 1

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

<强> Example

代码：

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

}

Answer 2

如果您当前的标记不重要（span + <ul>），那么您可以使用自定义list-style-image的{​​{1}}。

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

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

Answer 3

使用float:left和margin-bottom来越过div：

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