Форум Сайтостроение Веб-строительство

CSS отступ текста во врезке

MrDesigner
На сайте с 31.01.2008
Offline
210
MrDesigner
312

Помогите, плз, грамотным решением.

Есть врезка. Код: 

.relinking {

  background: none repeat scroll 0 0 #faf5f1;

  border-top: 1px dashed rgba(0,0,0,0.2);

  border-bottom: 1px dashed rgba(0,0,0,0.2);

  color: rgba(0,0,0,0.5);

  font-size: 15px;

  padding: 20px;

  position: relative;

  margin: 4% auto;

  min-height: 48px;

  }

  

  .relinking:before {

  font-family: FontAwesome; 

  content: "\f05a"; 

  font-size: 48px; 

  font-style: normal; 

  float:left; 

  line-height: 1.0; 

  margin-right: 3%;

  color: rgba(200, 200, 200, 0.5);

  }

Как правильно задать отступ текста с левой стороны - см. скриншот, где стрелка. Текст должен быть выровнен по голубой линии.

Тогда, так понимаю, код в .relinking:before margin-right: 3%.

Да, в CSS чайник. ))) Спасибо.

png Screenshot-01.png
S
На сайте с 30.09.2016
Offline
469
Sitealert
#1

padding-left: 90px;

Отпилю лишнее, прикручу нужное, выправлю кривое. Вытравлю вредителей.
IL
На сайте с 20.04.2007
Offline
435
ivan-lev
#2

На заметку.. Убрать обтекание можно так:

http://xiper.net/collect/html-and-css-tricks/content/overflow-and-orphans

... :) Облачные серверы от RegRu - промокод 3F85-3D10-806D-7224 ( http://levik.info/regru )
MrDesigner
На сайте с 31.01.2008
Offline
210
MrDesigner
#3
Sitealert:
padding-left: 90px;

Сдвигается иконка (i) вправо вместе с остальным тектстом. Иконку хотелось бы оставить на месте.

---------- Добавлено 07.09.2019 в 07:34 ----------

ivan-lev:
На заметку.. Убрать обтекание можно так:
http://xiper.net/collect/html-and-css-tricks/content/overflow-and-orphans

Нельзя вводить ещё один класс div.

Внутри 

div class='relinking'

можно оставить иконку на месте, а тексту задать отступ слева?

Нужен скрипт Сниппет Дайте совет по улучшению!
IL
На сайте с 20.04.2007
Offline
435
ivan-lev
#4
Сдвигается иконка (i)

Можно для иконки отрицательный margin-left прописать.

MrDesigner:
Иконку хотелось бы оставить на месте.

Из решения по ссылке.. добавки в блоки: ( IE6-совместимо 😂 )

.relinking:before {
	float: left; /* задаем обтекание */
	margin:10px; /* отступ для красоты */
	display:inline; /* для IE6, чтоб отступ слева не удвоился */
}
.relinking {
	overflow:hidden;
}
* html .relinking {	
	float:left;
}
MrDesigner
На сайте с 31.01.2008
Offline
210
MrDesigner
#5
ivan-lev:
Можно для иконки отрицательный margin-left прописать.

Да, отрицательный отступ помог! Ещё раз - всем спасибо.

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий