Не могу решить вопрос, хочу сделать список с иконками (контакты почта и тд), вроде чтото получилось, но если строка длинная соответственно переходит на следующую строку и начинается без отступа как первая, то есть текст проходит под иконкой, что хотелось бы убрать. В скрине показано чего хочу добиться, ну и код
CODE ( html):
скопировать код в буфер обмена
<ul id="BottomInfo"> <li> <span class="glyphicon glyphicon-earphone"></span> <a><?=View::ReturnBlock("Address","html");?></a> </li> <li> <span class="glyphicon glyphicon-envelope"></span> <a href="mailto:<?=View::ReturnBlock("Email","html");?>"><?=View::ReturnBlock("Email","html");?></a> </li> <li> <span class="glyphicon glyphicon-map-marker"></span> <a href="<?=View::ReturnBlock("PhoneTop","html");?>"> <?=View::ReturnBlock("PhoneTop","title");?> </a> </li> </ul>
CODE ( html):
скопировать код в буфер обмена
#BottomInfo{margin-top: 7px;padding: 5px 0;} #BottomInfo li{ display:block; margin-bottom: 10px; position:relative;} #BottomInfo li span{ color:#00a1e6; font-size:1.1em;} #BottomInfo li a{ color:#FFFFFF;font-size:1.1em;line-height:17px;} #BottomInfo li p::before{ padding-left:10px; display:inline-block;} #BottomInfo li p{ padding-left:10px; display:inline-block;}
Но если происходит переход на следующую строку, то эта строка упорно лезет пол иконку (без отступа слева) Прикреплено изображение
(Отредактировано автором: 24 Января, 2017 - 23:04:33)
|