Li item on two lines. Second line has no margin

Question

I'm currently working on an unordered list containing list items with taglines. I'm having a problem concerning one list item, which is long enough to take up two lines (See image)

I want it so that the second line is aligned with the first line. This is the HTML code i'm using. I used fontAwesome for the check images.

ul {
  width: 300px;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
<ul class="fa-ul custom-list">
  <li><i class="fa fa-check fa-fw"></i>List item on 1 line</li>
  <li><i class="fa fa-check fa-fw"></i>List item on 1 line</li>
  <li><i class="fa fa-check fa-fw"></i>This is a list item that actually takes up 2 lines. Looks ugly</li>
</ul>

I already tried to enter multiple   in between '2' and 'lines' but that seems like a really bad practice to me. I hope someone can help me with this problem.

Echevarria

I've moved your code into a Stack Snippet to make it easier for everyone to reproduce your issue. – Frolick

Answer 1

This is because the tick is inline content so when the text wraps it will continue to flow as usual.

You can stop this behaviour by taking advantage of text-indent:

The text-indent property specifies how much horizontal space should be left before the beginning of the first line of the text content of an element.

text-indent (https://developer.mozilla.org/en-US/docs/Web/CSS/text-indent)

By supplying a negative text-indent you can tell the first line to shift a desired amount to the left. If you then specify a positive padding-left you can cancel this offset out.

In the following example a value of 1.28571429em is used because it is the width set on the .fa-fw by font-awesome.

ul {
  width: 300px;
}
li {
    padding-left: 1.28571429em;
    text-indent: -1.28571429em;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
<ul class="fa-ul custom-list">
    <li><i class="fa fa-check fa-fw"></i>List item on 1 line</li>
    <li><i class="fa fa-check fa-fw"></i>List item on 1 line</li>
    <li><i class="fa fa-check fa-fw"></i>This is a list item that actually takes up 2 lines. Looks ugly</li>
</ul>

Frolick

Answer 2

you can just add this to your ul:

ul {
text-indent:-20px; 
margin-left:20px;
}

JSFIDDLE

Corriveau

Thanks for your answer. Still gonna have to give #Hobbes the correct answer because of actual explanation – Echevarria

Answer 3

You could remove the check out of the page flow by setting them with position:absolute

ul {
  width: 300px;
}
.fa-fw {
  position: absolute;
  left: -22px;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
<ul class="fa-ul custom-list">
  <li><i class="fa fa-check fa-fw"></i>List item on 1 line</li>
  <li><i class="fa fa-check fa-fw"></i>List item on 1 line</li>
  <li><i class="fa fa-check fa-fw"></i>This is a list item that actually takes up 2 lines. Looks ugly</li>
</ul>

Scathe

Answer 4

You can use "display:table" as style for li, and inside create a span with "display:table-cell" styling. Or create corresponding class. Like this:

<li style="display:table"><span style="display:table-cell">text with 
all lines indented</span></li>

Anissa

Answer 5

you can put your text in a div and give float:left to your inner li and div.

Inwardly

Answer 6

ul li{
padding: 10px 0 10px 20px;
text-indent: -1em;
}

add padding and text indent - that moves the text from the li:before.

Deathwatch

Answer 7

You can use list-style-position:outside. Do your CSS like this:

ul li {
   list-style-position:outside;
     ... whatever else ...
} 

or directly inline:

<li style = 'list-style-position:outside'>stuff </li>      

Lamprophyre

Answer 8

    
    ul li {
    display: flex;
     flex-direction: row;
    }
    
     ul li:before {
    font: normal normal normal 14px/1 FontAwesome;
    content: "\f054";
    margin-right: 7px;
    display: flex;
    align-items: flex-start;
    margin-top: 2px;
    }

<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
<ul><li>Visit the Museum of Modern Art in Manhattan</li>
    <li>Visit to Bali with tripraja</li>
    <li>Check out Campbell's Soup Cans by Warhol and The Dance (I) by Matisse</li>
    <li>Behold masterpieces by Gauguin, Dali, Picasso, and Pollock</li>
    <li>Enjoy free audio guides available in English, French, German, Italian, Spanish, Portuguese.</li></ul>

Eucken