Question 43463 in Html Question posted in
Some basic documentation can be found here.

Ordered/Unordered List With Multiple Columns – Html

This isn’t a question on how to use columns on lists, but rather the alignment of the columns on my site.

My code:

<ol class="threecolumns">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
</ol>

<style>
.threecolumns {column-count: 3;}
</style>

Using codepen, I get the expected result (sorry for the rudimentary example):

  1. Item 1    3. Item 3    5. Item 5
  2. Item 2    4. Item 4

My site outputs it like this:

  1. Item 1    2. Item 2    4. Item 4
                  3. Item 3    5. Item 5

I am using MadCap Flare as the publishing engine. I can’t see anything in the CSS for the ol/ul that would cause this though.

Any tips?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    My stylesheet also included li {margin: 8px 0;} which comes from MadCap Flare's default styles. This seems to break the flow of the list items. After removing that margin the ordered list operates as expected.


  2. 0

    It seems that you are trying to create a three-column layout using an ordered list. The CSS property column-count can be used to achieve this. However, it seems that you are having trouble with the alignment of the columns. One possible solution is to use display: flex on the ordered list. Another solution is to use float on the list items. You can also try using display: inline-block on the list items.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search