html - Weird text wrap in li -


i weird text wrap inside list-item (li).

check out: http://demo.hno-eghlimi.de/#footer

i placed span icon (position: absolute -> cause wrap) before main content of li. have no idea why text inside li wrapping down. have solution problem?

you need change 2 things:

  1. apply line-height: 30px; <li> element. because image 30px in height.
  2. apply vertical-align: bottom; <span> image. vertically align image text.

also, break padding between lines, may want add bottom padding/margin <li> elements well.

the resulting code:

step 1:

.footer .footer-contact-list li {   position: relative;   line-height: 30px; /* add */   /* here may add bottom margin/padding */ } 

step 2:

.footer .footer-contact-list li span {   height: 30px;   width: 30px;   border-radius: 50%;   background: #a32020;   display: inline-block;   margin: 0 5px 0 0;   position: relative;   vertical-align: bottom; /* add */ } 

Comments

Popular posts from this blog

c# - Validate object ID from GET to POST -

node.js - Custom Model Validator SailsJS -

php - Find a regex to take part of Email -