How can you utilize ul and li elements to permit multiple properly aligned columns where each column-CodePudding

I have multiple ul sections within my HTML document. Each one utilizes an unordered list of items. For one very specific ul within the HTML, I have a list of items like so:

   <ul>
     <li>item 1</li>
     <li>item 2</li>
     <li>ck-item 2</li>
     <li>item 3</li>
     <li>item 4</li>
     <li>ck-item 4</li>
     <li>item 5</li>
     <li>ck-item 5</li>
   </ul>

I am trying to find a way to use CSS and classes, so that for any ul that requires multiple columns, I can force the list above to result in the following:

item 1
item 2     ck-item2
item 3
item 4     ck-item4
item 5     ck-item5

Basically, regardless of how short or long the actual text of say "item 2" is, I want the second column of ck-item2 to line up horizontally with any other ck-item#s within the second column. Essentially, a fixed amount of space between column 1 and 2, as if you were using a tab or something, so anything in column 2 lined up.

I have spent the past 8 hours trying to achieve this to no avail. It seems like it should be an easy thing to do, but ... Any assistance provided is appreciated.

EDIT: Perhaps I wasn't clear. For example, I can do the following:

   <ul>
      <li>item 1</li>
      <li>item 2     ck-item 2</li>
      <li>item 3</li>
      <li>item 4     ck-item 4</li>
      <li>item 5     ck-item 5</li>
   </ul>

Unfortunately, with this approach, depending on how long the actual test is for "item 2, item 4, and item 5", you could end up with output that looks like:

item 1
item 2    ck-item 2
item 3
item 4   ck-item 4
item 5             ck-item 5

So it looks really ugly. I hope that helps to explain what I am attempting to do.

CodePudding user response：

If this is not critical you can put some a sign between the word and the number or remove the space. After that use the css property word-spacing.

ul {
  list-style: none;
}
li {
  word-spacing: 3em;
}

<ul>
  <li>item#1</li>
  <li>item#2 ck-item#2</li>
  <li>item#3</li>
  <li>item#4 ck-item#4</li>
  <li>item#5 ck-item#5</li>
</ul>

CodePudding user response：

You could use CSS Grid.

See the example below, with explanation following it:

.ul-table {
  display: grid;
  grid-template-columns: max-content max-content;
  list-style-type: none;
  padding: 0;
  column-gap: 20px;
}

.ul-table li {
  border: dashed 1px red;
  white-space: nowrap;
}

.ul-table li.start-new-row {
  grid-column-start: 1;
}

<ul class="ul-table">
  <li class="start-new-row">item 1</li>
  <li class="start-new-row">long item 2</li>
  <li>ck-item 2</li>
  <li class="start-new-row">very very long item 3</li>
  <li class="start-new-row">item 4</li>
  <li>ck-item 4</li>
  <li class="start-new-row">item 5</li>
  <li>ck-item 5</li>
</ul>

Explanation for the .ul-table style:

display: grid; Enables grid layout.
grid-template-columns: max-content max-content; Creates 2 columns, each just wide enough to contain the longest text present in that column.
column-gap: 20px = Spacing between columns.

And for the .start-new-row style:

grid-column-start: 1; Starts a new grid row.