Форумы портала PHP.SU » Клиентская разработка » HTML, Дизайн & CSS » Bootstrap иконки в списке

Страниц (1): [1]
 

1. 3d_killer - 24 Января, 2017 - 23:03:20 - перейти к сообщению
Не могу решить вопрос, хочу сделать список с иконками (контакты почта и тд), вроде чтото получилось, но если строка длинная соответственно переходит на следующую строку и начинается без отступа как первая, то есть текст проходит под иконкой, что хотелось бы убрать. В скрине показано чего хочу добиться, ну и код
CODE (html):
скопировать код в буфер обмена
  1.  
  2. <ul id="BottomInfo">
  3.                         <li>
  4.                         <span class="glyphicon glyphicon-earphone"></span>
  5.                         <a><?=View::ReturnBlock("Address","html");?></a>
  6.                     </li>
  7.                     <li>
  8.                         <span class="glyphicon glyphicon-envelope"></span>
  9.                         <a href="mailto:<?=View::ReturnBlock("Email","html");?>"><?=View::ReturnBlock("Email","html");?></a>
  10.                     </li>
  11.                     <li>
  12.                         <span class="glyphicon glyphicon-map-marker"></span>
  13.                         <a href="<?=View::ReturnBlock("PhoneTop","html");?>">
  14.                                                         <?=View::ReturnBlock("PhoneTop","title");?>
  15.                         </a>
  16.                     </li>
  17.                 </ul>
  18.  


CODE (html):
скопировать код в буфер обмена
  1.  
  2. #BottomInfo{margin-top: 7px;padding: 5px 0;}
  3. #BottomInfo li{ display:block; margin-bottom: 10px; position:relative;}
  4. #BottomInfo li span{ color:#00a1e6; font-size:1.1em;}
  5. #BottomInfo li a{ color:#FFFFFF;font-size:1.1em;line-height:17px;}
  6.  
  7. #BottomInfo li p::before{ padding-left:10px; display:inline-block;}
  8. #BottomInfo li p{ padding-left:10px; display:inline-block;}
  9.  

Но если происходит переход на следующую строку, то эта строка упорно лезет пол иконку (без отступа слева)
2. skruglikov - 24 Января, 2017 - 23:33:33 - перейти к сообщению
простое решение: http://codepen[dot]io/skruglikov/pen/PWKNgw
3. 3d_killer - 25 Января, 2017 - 08:37:44 - перейти к сообщению
спасибо, думал об этом, получается что спаны будут залазить на соседний див, ну да ладно
4. skruglikov - 25 Января, 2017 - 09:18:42 - перейти к сообщению
3d_killer пишет:
спасибо, думал об этом, получается что спаны будут залазить на соседний див, ну да ладно


для списка по умолчанию есть аттрибут margin-left, если вы конечно не ресетили его... но в любом случае вы можете его задать явно, указав

CODE (htmlphp):
скопировать код в буфер обмена
  1.  
  2. ul { margin-left: 25px; }
  3.  
5. DelphinPRO - 25 Января, 2017 - 09:50:46 - перейти к сообщению
http://codepen[dot]io/anon/pen/xgLLeg
6. skruglikov - 25 Января, 2017 - 09:51:39 - перейти к сообщению
немного исправил: http://codepen[dot]io/skruglikov/pen/PWKNgw

 

Powered by ExBB FM 1.0 RC1