JonasLoerken JonasLoerken - 1 year ago 68
CSS Question

Weird text wrap in li

I get a weird text wrap inside a list-item (li).

Check it out:

I placed a span with an icon (position: absolute -> This is the cause for the wrap) before the main content of the li. I have no idea why the text inside the li is wrapping down. Do you have a solution for my problem?

Answer Source

You need to change two things:

  1. Apply line-height: 30px; to the <li> element. This is because your image is 30px in height.
  2. Apply vertical-align: bottom; to your <span> with the image. This is to vertically align your image with the text.

Also, this will break your padding between the lines, so you may want to add some bottom padding/margin to <li> elements as well.

The resulting code:

Step 1:

.footer .footer-contact-list li {
  position: relative;
  line-height: 30px; /* add this */
  /* here you may also add some 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 this */