PHP.SU

Программирование на PHP, MySQL и другие веб-технологии
PHP.SU Портал     На главную страницу форума Главная     Помощь Помощь     Поиск Поиск     Поиск Яндекс Поиск Яндекс     Вакансии  Пользователи Пользователи


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

> Без описания
3d_killer
Отправлено: 24 Января, 2017 - 23:03:20
Post Id



Участник


Покинул форум
Сообщений всего: 1896
Дата рег-ции: Апр. 2011  
Откуда: Ростов-на-Дону


Помог: 21 раз(а)




Не могу решить вопрос, хочу сделать список с иконками (контакты почта и тд), вроде чтото получилось, но если строка длинная соответственно переходит на следующую строку и начинается без отступа как первая, то есть текст проходит под иконкой, что хотелось бы убрать. В скрине показано чего хочу добиться, ну и код
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.  

Но если происходит переход на следующую строку, то эта строка упорно лезет пол иконку (без отступа слева)
Прикреплено изображение
2017-01-24_23-56-13.png

(Отредактировано автором: 24 Января, 2017 - 23:04:33)

 
My status
 Top
skruglikov
Отправлено: 24 Января, 2017 - 23:33:33
Post Id


Новичок


Покинул форум
Сообщений всего: 22
Дата рег-ции: Янв. 2017  


Помог: 1 раз(а)




простое решение: http://codepen[dot]io/skruglikov/pen/PWKNgw
 
 Top
3d_killer
Отправлено: 25 Января, 2017 - 08:37:44
Post Id



Участник


Покинул форум
Сообщений всего: 1896
Дата рег-ции: Апр. 2011  
Откуда: Ростов-на-Дону


Помог: 21 раз(а)




спасибо, думал об этом, получается что спаны будут залазить на соседний див, ну да ладно
 
My status
 Top
skruglikov
Отправлено: 25 Января, 2017 - 09:18:42
Post Id


Новичок


Покинул форум
Сообщений всего: 22
Дата рег-ции: Янв. 2017  


Помог: 1 раз(а)




3d_killer пишет:
спасибо, думал об этом, получается что спаны будут залазить на соседний див, ну да ладно


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

CODE (htmlphp):
скопировать код в буфер обмена
  1.  
  2. ul { margin-left: 25px; }
  3.  
 
 Top
DelphinPRO
Отправлено: 25 Января, 2017 - 09:50:46
Post Id



Активный участник


Покинул форум
Сообщений всего: 7190
Дата рег-ции: Февр. 2012  


Помог: 353 раз(а)






-----
Чем больше узнаю, тем больше я не знаю.
 
 Top
skruglikov
Отправлено: 25 Января, 2017 - 09:51:39
Post Id


Новичок


Покинул форум
Сообщений всего: 22
Дата рег-ции: Янв. 2017  


Помог: 1 раз(а)




немного исправил: http://codepen[dot]io/skruglikov/pen/PWKNgw
 
 Top
Страниц (1): [1]
Сейчас эту тему просматривают: 1 (гостей: 1, зарегистрированных: 0)
« HTML, Дизайн & CSS »


Все гости форума могут просматривать этот раздел.
Только зарегистрированные пользователи могут создавать новые темы в этом разделе.
Только зарегистрированные пользователи могут отвечать на сообщения в этом разделе.
 



Powered by PHP  Powered By MySQL  Powered by Nginx  Valid CSS  RSS

 
Powered by ExBB FM 1.0 RC1. InvisionExBB