0

I have a two-column-list that looks like this

List

I need the list items of the second column to always align to the right border of the list but not text-align right, but like this:

List2

so the item with the longest word is actually text-aligned to the right, but the other shorter items start right where the longest item starts. The list css up until now is

ul{
    column-count:2;
}
rogerk
  • 43
  • 5

1 Answers1

0

If you're open to using two lists in a parent container you can utilize flexbox. margin-left: auto moves the element to end of container in this case. Be sure to specify the parent's width so it knows what to align to! See https://css-tricks.com/snippets/css/a-guide-to-flexbox/

<div style="width:100%; display: flex; flex-direction: row">
    <ul style="">
        <li>item</li>
        <li>item</li>
        <li>item</li>
    </ul>
    <ul style="margin-left: auto">
        <li>item</li>
        <li>item</li>
        <li>item</li>
    </ul>

</div>
atultw
  • 921
  • 7
  • 15
  • Hmm..I'd prefer not to use extra divs and classes... – rogerk Feb 22 '21 at 18:57
  • @rogerk There aren't any classes here. This is cleaner than a CSS workaround on one ``ul``. To achieve what you are trying to do without two containers, you would have to use ``text-align`` on the second column ``li`` elements, or something similar. – atultw Feb 22 '21 at 23:22