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:
- apply
line-height: 30px;
<li>
element. because image 30px in height. - 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
Post a Comment