How to display an unordered list in two columns

Question

With the following HTML  what is the easiest method to display the list as two columns   lt ul gt       lt li gt A lt  li gt       lt li gt B lt  li gt       lt li gt C lt  li gt       lt li gt D lt  li gt       lt li gt E lt  li gt   lt  ul gt   Desired display  A B C D E  The solution needs to work with Internet Explorer

User · Answer

Though I found Gabriel answer to work to a degree i did find the following when trying to order the list vertically (first ul A-D and second ul E-G):

When the ul had an even number of li's in it, it was not evenly spreading it across the ul's
using the data-column in the ul didn't seem to work very well, I had to put 4 for 3 columns and even then it was still only spreading the li's into 2 of the ul generated by the JS

I have revised the JQuery so the above hopefully doesn't happen.

(function ($) {
    var initialContainer = $('.customcolumns'),
        columnItems = $('.customcolumns li'),
        columns = null,
        column = 0;
    function updateColumns() {
        column = 0;
        columnItems.each(function (idx, el) {
            if ($(columns.get(column)).find('li').length >= (columnItems.length / initialContainer.data('columns'))) {
                column += 1;
            }
            $(columns.get(column)).append(el);
        });
    }
    function setupColumns() {
        columnItems.detach();
        while (column++ < initialContainer.data('columns')) {
            initialContainer.clone().insertBefore(initialContainer);
            column++;
        }
        columns = $('.customcolumns');
        updateColumns();
    }

    $(setupColumns);
})(jQuery);

.customcolumns {
  float: left;
  position: relative;
  margin-right: 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <ul class="customcolumns" data-columns="3">
    <li>A</li>
    <li>B</li>
    <li>C</li>
    <li>D</li>
    <li>E</li>
    <li>F</li>
    <li>G</li>
    <li>H</li>
    <li>I</li>
    <li>J</li>
    <li>K</li>
    <li>L</li>
    <li>M</li>
  </ul>
</div>

User · Answer

I tried posting this as a comment  but couldn t get the columns to display right  as per your question    You are asking for   A B  C D  E      but the answer accepted as the solution will return   A D  B E  C      so either the answer is incorrect or the question is   A very simple solution would be to set the width of your  lt ul gt  and then float and set the width of your  lt li gt  items like so   lt ul gt       lt li gt A lt  li gt       lt li gt B lt  li gt       lt li gt C lt  li gt       lt li gt D lt  li gt       lt li gt E lt  li gt   lt  ul gt   ul      width 210px    li      background green      float left      height 100px      margin 0 10px 10px 0      width 100px    li nth-child even       margin-right 0      Example here http   jsfiddle net Jayx Qbz9S 1   If your question is wrong  then the previous answers apply  with a JS fix for lacking IE support

User · Answer

You can use CSS only to set two columns or more      A E      B       C      D     lt ul class  columns  gt       lt li gt A lt  li gt       lt li gt B lt  li gt       lt li gt C lt  li gt       lt li gt D lt  li gt       lt li gt E lt  li gt   lt  ul gt   ul columns       -webkit-columns  60px 2     -moz-columns  60px 2      columns  60px 2     -moz-column-fill  auto     column-fill  auto

User · Answer

I like the solution for modern browsers  but the bullets are missing  so I add it a little trick   http   jsfiddle net HP85j 419   ul       list-style-type  none      columns  2      -webkit-columns  2      -moz-columns  2      li before     content

User · Answer

This can be achieved using column-count css property on parent div   like   column-count 2    check this out for more details   How to make floating DIV list appear in columns  not rows

User · Answer

more one answer after a few years   in this article  http   csswizardry com 2010 02 mutiple-column-lists-using-one-ul   HTML    lt ul id  double  gt   lt  -- Alter ID accordingly -- gt     lt li gt CSS lt  li gt     lt li gt XHTML lt  li gt     lt li gt Semantics lt  li gt     lt li gt Accessibility lt  li gt     lt li gt Usability lt  li gt     lt li gt Web Standards lt  li gt     lt li gt PHP lt  li gt     lt li gt Typography lt  li gt     lt li gt Grids lt  li gt     lt li gt CSS3 lt  li gt     lt li gt HTML5 lt  li gt     lt li gt UI lt  li gt   lt  ul gt    CSS   ul    width 760px    margin-bottom 20px    overflow hidden    border-top 1px solid  ccc    li    line-height 1 5em    border-bottom 1px solid  ccc    float left    display inline     double li    width 50     triple li    width 33 333      quad li      width 25      six li       width 16 666

User · Answer

In updateColumns   need if  column  gt   columns length  rather than if  column  gt  columns length  to list all elements  C is skipped for example  so   function updateColumns        column   0      columnItems each function idx  el           if  column  gt   columns length               column   0                    console log column  el  idx             columns get column   append el           column    1              http   jsfiddle net e2vH9 1

User · Answer

Here s a possible solution   Snippet    x000D   x000D  ul   x000D    width  760px  x000D    margin-bottom  20px  x000D    overflow  hidden  x000D    border-top  1px solid  ccc  x000D    x000D  li   x000D    line-height  1 5em  x000D    border-bottom  1px solid  ccc  x000D    float  left  x000D    display  inline  x000D    x000D   double li   x000D    width  50   x000D    x000D   lt ul id  double  gt  x000D     lt li gt first lt  li gt  x000D     lt li gt second lt  li gt  x000D     lt li gt third lt  li gt  x000D     lt li gt fourth lt  li gt  x000D   lt  ul gt  x000D   x000D   x000D    And it is done  For 3 columns use li width as 33   for 4 columns use 25  and so on

User · Answer

Thisd was a perfect solution for me  looking it for years   http   css-tricks com forums topic two-column-unordered-list

User · Answer

I was looking at  jaider s solution which worked but I m offering a slightly different approach that I think is more easy to work with and which I ve seen to be good across browsers   ul      list-style-type  disc      -webkit-columns  2      -moz-columns  2      columns  2      list-style-position  inside   this is important addition     By default un-ordered list display the bullet position outside but then in some browsers it would cause some display problems based on the browser s way of laying out your website   To get it to display in the format   A B C D E   etc  use the following   ul li      float  left      width  50    helps to determine number of columns  for instance 33 3  displays 3 columns   ul      list-style-type  disc      This should solve all your problems with displaying columns  All the best and thanks  jaider as your response helped to guide me to discover this

User · Answer

Here is an easy way to make a multiple column list using nothing more than simple CSS   The style tags can obviously be put into a CSS if desired   lt p gt Materials List lt  p gt   lt ul style  quot display  inline-block  float  left quot  gt       lt u gt Item Description lt u gt       lt li gt 1 2 quot  x 4  wood dowel lt  li gt       lt li gt 1 2 quot  x 12 quot   PVC pipe lt  li gt       lt li gt 1 2 quot  PVC pipe end cap lt  li gt       lt li gt 7 16 quot  x 3 quot  light duty expansion spring lt  li gt       lt li gt 6 quot  plastic zip ties lt  li gt       lt li gt Light weight antenna lt  li gt   lt  ul gt   lt div style  quot display  inline-block  margin-left  1em quot  gt       lt u gt Qty lt  u gt       lt div style  quot text-indent  0 5em quot  gt 3 lt  div gt       lt div style  quot text-indent  0 5em quot  gt 1 lt  div gt       lt div style  quot text-indent  0 5em quot  gt 1 lt  div gt       lt div style  quot text-indent  0 5em quot  gt 2 lt  div gt       lt div style  quot text-indent  0 5em quot  gt 8 lt  div gt       lt div style  quot text-indent  0 5em quot  gt 1 lt  div gt   lt  div gt   lt p gt  lt  p gt

User · Answer

The legacy solution in the top answer didn t work for me because I wanted to affect multiple lists on the page and the answer assumes a single list plus it uses a fair bit of global state  In this case I wanted to alter every list inside a  lt section class  list-content  gt    const columns   2     section list-content   each function  index  element        let section     element       let items   section find  ul li   detach        section find  ul   detach        for  let i   0  i  lt  columns  i              section append   lt ul gt  lt  ul gt               let lists   section find  ul        for  let i   0  i  lt  items length  i              lists get i   columns  append items i

User · Answer

With Bootstrap    This answer  https   stackoverflow com a 23005046 1128742  got me pointed towards this solution    lt ul class  list-unstyled row  gt      lt li class  col-xs-6  gt Item 1 lt  li gt      lt li class  col-xs-6  gt Item 2 lt  li gt      lt li class  col-xs-6  gt Item 3 lt  li gt   lt  ul gt    http   jsfiddle net patrickbad767 472r0ynf

User · Answer

Modern Browsers  leverage the css3 columns module to support what you are looking for   http   www w3schools com cssref css3 pr columns asp  CSS   ul     columns  2    -webkit-columns  2    -moz-columns  2      http   jsfiddle net HP85j 8   Legacy Browsers  Unfortunately for IE support you will need a code solution that involves JavaScript and dom manipulation  This means that anytime the contents of the list changes you will need to perform the operation for reordering the list into columns and reprinting  The solution below uses jQuery for brevity   http   jsfiddle net HP85j 19   HTML    lt div gt       lt ul class  columns  data-columns  2  gt           lt li gt A lt  li gt           lt li gt B lt  li gt           lt li gt C lt  li gt           lt li gt D lt  li gt           lt li gt E lt  li gt           lt li gt F lt  li gt           lt li gt G lt  li gt       lt  ul gt   lt  div gt    JavaScript    function         var initialContainer       columns            columnItems       columns li            columns   null          column   1     account for initial column     function updateColumns            column   0          columnItems each function idx  el               if  idx     0  amp  amp  idx  gt   columnItems length   columns length     column   idx                    column    1                              columns get column   append el                         function setupColumns            columnItems detach            while  column    lt  initialContainer data  columns                 initialContainer clone   insertBefore initialContainer               column                      columns       columns                 function            setupColumns            updateColumns               jQuery     CSS    columns      float  left      position  relative      margin-right  20px      EDIT   As pointed out below this will order the columns as follows   A  E B  F C  G D   while the OP asked for a variant matching the following   A  B C  D E  F G   To accomplish the variant you simply change the code to the following   function updateColumns        column   0      columnItems each function idx  el           if  column  gt  columns length               column   0                      columns get column   append el           column    1

User · Answer

This is the simplest way to do it  CSS only    add width to the ul element  add display inline-block and width of the new column  should be less than half of the ul width        x000D   x000D  ul list   x000D    width  300px    x000D    x000D   x000D  ul list li  x000D    display inline-block  x000D    width  100px  x000D    x000D   lt ul class  list  gt  x000D       lt li gt A lt  li gt  x000D       lt li gt B lt  li gt  x000D       lt li gt C lt  li gt  x000D       lt li gt D lt  li gt  x000D       lt li gt E lt  li gt  x000D   lt  ul gt  x000D   x000D   x000D

User · Answer

Now days  for the expected result  display grid  would do  be the easiest      x000D   x000D  ul     display  grid    grid-template-columns  repeat 2  1fr     x000D   lt ul gt     lt li gt A lt  li gt     lt li gt B lt  li gt     lt li gt C lt  li gt     lt li gt D lt  li gt     lt li gt E lt  li gt   lt  ul gt  x000D   x000D   x000D   you can also get the columns shrinking on the left and able to have different width   x000D   x000D  ul     display  grid    grid-template-columns  repeat 2  auto     justify-content  start     li     margin-left  1em    border  solid 1px   see me      x000D   lt ul gt     lt li gt A lt  li gt     lt li gt B lt  li gt     lt li gt C 123456 lt  li gt     lt li gt D lt  li gt     lt li gt E lt  li gt   lt  ul gt  x000D   x000D   x000D

User · Answer

You can do this really easily with the jQuery-Columns Plugin for example to split a ul with a class of  mylist you would do       mylist   cols 2     Here s a live example on jsfiddle  I like this better than with CSS because with the CSS solution not everything aligns vertically to the top

[html] How to display an unordered list in two columns?

Examples related to html

Examples related to css

Examples related to html-lists

Examples related to css-multicolumn-layout