Greg Gum Greg Gum - 2 months ago 8
CSS Question

How to keep consistence space before list item

I have this unordered list:

<ul>
<li><i class="fa fa-chevron-down"></i>Item 1</li>
<li><i class="fa fa-chevron-left"></i>Item 2</li>
<li>Item 3</li>
</ul>


How do I keep the word "Item" lined up vertically on the left (not middle)? The First letter of Item should be vertical.

The issue is that sometimes there will be an icon. Sometimes not. And sometimes the icon will vary slightly in size, such as the difference between down and left icons.

This is basically a simple treeview display.

Answer

Give li a fixed padding-left, position: relative and make the icon position: absolute; to the left should fix your problem.

li {
  padding-left: 40px;
  position: relative;
}

li i {
  left: 0;
  position: absolute;
  top: 0;
}

In addition you can set a width or max-width to the icon:

li i {
  left: 0;
  position: absolute;
  top: 0;
  max-width: 30px;
}
Comments