縮進段落的第二行以排列第一行？

我正在使用Font Awesome添加圖標到p：在選擇器之前，我想知道如何才能縮進段落的第二行，以便文本對齊。縮進段落的第二行以排列第一行？

這裏是我的電流輸出是什麼樣子：

Non-indented

這裏就是我試圖完成：

Indented

這裏是我的代碼：

<div class="result> 
    <p class='fa location'>{{ address }}<br/>{{ citystate }}</p> 
</div>

這裏是我的CSS：

.result .location:before { 
    content: "\f041"; 
    padding-right:6px; 
    color:#b3b3b3; 
}

是否可以按原樣完成此操作？或者我是否需要重構我的代碼以實現這種效果？

來源

2014-02-27 user3306747

將整個段落填充到右側，然後將fontawesome圖標拉到左側以填充創建的空間。

.result { 
    padding-left: 30px; 
} 

.result .location:before { 
    content: "\f041"; 
    color:#b3b3b3; 
    margin-left: -10px; 
    padding-right: 2px; 
}

jsfiddle

來源

2014-02-27 20:27:39 essmahr

謝謝，這似乎工作得很好。我在整個段落中添加了一個20px的填充，然後在'：before'類中添加了-20px和padding的右邊緣，現在它正確對齊了。 – user3306747

這是正確的答案 –

你可以在<br />之後加入一些 什麼，使你的代碼看起來是這樣的：

<div class="result> 
    <p class='fa location'>{{ address }}<br/>&nbsp;&nbsp;{{ citystate }}</p> 
</div>

中添加 直到它被遠移到你需要它。

我希望能幫到你。

來源

2014-02-27 20:34:04 Aurous

縮進段落的第二行以排列第一行？

回答

相關問題