How to keep consistence space before list item

Question

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.

I wasn't looking for vertical centering. Just the First Word after the Icon Left Aligned. — Greg Gum
– Greg Gum, Commented Sep 23, 2016 at 3:24

Wim Mertens · Accepted Answer · 2016-09-23 03:35:31Z

1

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; }

edited Sep 23, 2016 at 3:35

answered Sep 23, 2016 at 3:25

Wim Mertens

1,7903 gold badges20 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Greg Gum Over a year ago

Works perfectly. Maybe an explanation of how it work?

Wim Mertens Over a year ago

Because you set position: absolute to the icon it won't push out the text after the icon. And adding padding to the li will give space for an icon to be there (or not).

Wim Mertens Over a year ago

Here's some more information about positioning: css-tricks.com/absolute-positioning-inside-relative-positioning and css-tricks.com/…

id3vz · Accepted Answer · 2016-09-23 03:00:23Z

try this put the text in a span and use the css code below

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

and the css

ul li i{vertical-align:middle} ul li span{vertical-align:middle}

I wish it solve your problem

Obsidian Age · Accepted Answer · 2016-09-23 03:46:49Z

You're going to need fixed-width icons to accomplish what you're asking. There's no way of aligning the items unless there is a fixed-width. You can add a fixed-width to font-awesome icons with the class icon-fixed-width since version 3.1.1, and fa-fw since version 4.0. That gives a fixed with of 1.28571429em, which is annoying, but consistent.

Unfortunately CSS has no :parent selector, so you'll probably need to add a class to the <li> tags specifying whether of not they have an icon contained within:

<ul> <li class="yes"><i class="fa fa-fw fa-chevron-down"></i>Item 1</li> <li class="yes"><i class="fa fa-fw fa-chevron-left"></i>Item 2</li> <li>Item 3</li> </ul> li:not(.yes) { padding-left: 1.28571429em; }

I've created a fiddle of this here: http://jsfiddle.net/3qwkkg4a/1/

Of course, you could always put the class on the <li> tags that don't contain the icons, or just target the third one with li:nth-of-type(3) for this particular example ;)

Hope this helps! :)

EDIT

These classes can also be added through jQuery, assuming you have access, using:

$('li:has(i)').addClass('yes');

A fiddle showcasing this can be seen here, leaving the HTML untouched:

http://jsfiddle.net/Obsidian_Age/3qwkkg4a/2/

I don't think this really answers the question at all. The OP is looking for vertical-alignment
@JacobGray: The OP asked "How do I keep the word 'Item' lined up vertically?". The first two lines have the word 'Item' displayed to the right of the icon, and his icons take up a variable width. He wants to display all three of the words 'Item' directly below one another. To align the words vertically as such, you need to modify the horizontal offset of the third <li> item. You would also need to ensure that all icons occupy the same widths within themselves :)
@ObsidianAge I tried and this works as shown in your example. However, the items are created in code. So I end up with all of the li elements with the class of 'yes' So they all end up with the extra indent. There could be 3 items, or 30.
Unfortunately, that would have to be addressed in the code. There's multiple other questions about styling elements based on their children, but it's unfortunately not possible in CSS. The best you can do is define a class back-end based on conditional code, I'm afraid. jQuery is also an option, if available.
No problem! Glad to hear that I was on the right track with what you're after. It's a shame that you need to create the items in back-end code, but if you have access to jQuery, you can solve the problem with $('li:has(i)').addClass('yes');, which would create the relevant classes on the fly. I've added a new fiddle to my answer showcasing this. Otherwise, I'm afraid your only option is to somehow modify the classes in the conditional back-end logic.

Collectives™ on Stack Overflow

How to keep consistence space before list item

3 Answers 3

3 Comments

Comments

5 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

5 Comments

Linked

Related