圖像後的文字縮進

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

如果當前的標記並不重要（image + span），那麼你可以使用一個<ul>定製list-style-image。

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穿越格：

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