Отступ 2-й строки абзаца, чтобы выровняться с первой строкой?

Я использую Font Awesome для добавления значков в селекторы p:before, и мне интересно, как мне может сделать отступ только во 2-й строке абзаца, чтобы текст был выровнен.

Вот как выглядит мой текущий вывод:

Без отступа

И вот что я пытаюсь сделать:

С отступом

Вот мой код:

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

И вот мой CSS:

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

Возможно ли выполнить это как есть? Или мне нужно будет реструктурировать мой код для достижения этого эффекта?


html css font-awesome paragraph text-indent
person user3306747    schedule 27.02.2014    source источник

Ответы (2)


arrow_upward
5
arrow_downward

Дополните весь абзац вправо, а затем потяните значок шрифта влево, чтобы заполнить образовавшееся пространство.

.result {
    padding-left: 30px;
}

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

jsfiddle

person essmahr    schedule 27.02.2014
comment
Спасибо, кажется, отлично сработало. Я добавил отступ 20 пикселей ко всему абзацу, а затем добавил левое поле -20 пикселей и правое отступы к классу :before, и теперь он выровнен правильно. - person user3306747; 28.02.2014

arrow_upward
0
arrow_downward

Что вы могли бы добавить в некоторые &nbsp; после <br /> и сделать свой код таким:

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

добавляйте &nbsp; до тех пор, пока он не переместится настолько далеко, насколько вам это нужно.

Надеюсь, это помогло вам.

person Aurous    schedule 27.02.2014