Como exibir uma lista não ordenada em duas colunas?

Com o seguinte HTML, qual é o método mais fácil para exibir a lista como duas colunas?

<ul>
    <li>A</li>
    <li>B</li>
    <li>C</li>
    <li>D</li>
    <li>E</li>
</ul>

Visor desejado:

A B
C D
E

A solução precisa poder funcionar no Internet Explorer.

Navegadores modernos

aproveite o módulo de colunas css3 para dar suporte ao que você está procurando.

http://www.w3schools.com/cssref/css3_pr_columns.asp

CSS:

ul {
  columns: 2;
  -webkit-columns: 2;
  -moz-columns: 2;
}

http://jsfiddle.net/HP85j/8/

Navegadores herdados

Infelizmente, para o suporte ao IE, você precisará de uma solução de código que envolva JavaScript e manipulação de domínio. Isso significa que sempre que o conteúdo da lista for alterado, você precisará executar a operação para reordenar a lista em colunas e reimprimir. A solução abaixo usa o jQuery por questões de brevidade.

http://jsfiddle.net/HP85j/19/

HTML:

<div>
    <ul class="columns" data-columns="2">
        <li>A</li>
        <li>B</li>
        <li>C</li>
        <li>D</li>
        <li>E</li>
        <li>F</li>
        <li>G</li>
    </ul>
</div>

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 && idx > (columnItems.length / columns.length) + (column * idx)){
                column += 1;
            }
            $(columns.get(column)).append(el);
        });
    }
    function setupColumns(){
        columnItems.detach();
        while (column++ < initialContainer.data('columns')){
            initialContainer.clone().insertBefore(initialContainer);
            column++;
        }
        columns = $('.columns');
    }

    $(function(){
        setupColumns();
        updateColumns();
    });
})(jQuery);

CSS:

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

EDITAR:

Conforme indicado abaixo, isso ordenará as colunas da seguinte maneira:

A  E
B  F
C  G
D

enquanto o OP solicitou uma variante correspondente ao seguinte:

A  B
C  D
E  F
G

Para realizar a variante, basta alterar o código para o seguinte:

function updateColumns(){
    column = 0;
    columnItems.each(function(idx, el){
        if (column > columns.length){
            column = 0;
        }
        $(columns.get(column)).append(el);
        column += 1;
    });
}

Eu estava olhando para a solução da @ jaider, que funcionou, mas estou oferecendo uma abordagem um pouco diferente, que acho mais fácil de trabalhar e que considero ser boa nos navegadores.

ul{
    list-style-type: disc;
    -webkit-columns: 2;
    -moz-columns: 2;
    columns: 2;
    list-style-position: inside;//this is important addition
}

Por padrão, a lista não ordenada exibe a posição do marcador do lado de fora, mas, em alguns navegadores, isso causa alguns problemas de exibição com base na maneira do navegador de exibir seu site.

Para que seja exibido no formato:

A B
C D
E

etc. use o seguinte:

ul li{
    float: left;
    width: 50%;//helps to determine number of columns, for instance 33.3% displays 3 columns
}
ul{
    list-style-type: disc;
}

Isso deve resolver todos os seus problemas com a exibição de colunas. Tudo de bom e obrigado @jaider como sua resposta ajudou a me orientar a descobrir isso.

Tentei postar isso como um comentário, mas não consegui exibir as colunas corretamente (conforme sua pergunta).

Você está pedindo:

AB

CD

E

... mas a resposta aceita como solução retornará:

DE ANÚNCIOS

ESTAR

C

... então a resposta está incorreta ou a pergunta está.

Uma solução muito simples seria definir a largura do seu <ul>e, em seguida, flutuar e definir a largura dos seus <li>itens da seguinte maneira

<ul>
    <li>A</li>
    <li>B</li>
    <li>C</li>
    <li>D</li>
    <li>E</li>
</ul>

ul{
    width:210px;
}
li{
    background:green;
    float:left;
    height:100px;
    margin:0 10px 10px 0;
    width:100px;
}
li:nth-child(even){
    margin-right:0;
}

Exemplo aqui http://jsfiddle.net/Jayx/Qbz9S/1/

Se sua pergunta estiver errada, as respostas anteriores se aplicam (com uma correção JS por falta de suporte do IE).

Gosto da solução para navegadores modernos, mas faltam os marcadores, então adiciono um pequeno truque:

http://jsfiddle.net/HP85j/419/

ul {
    list-style-type: none;
    columns: 2;
    -webkit-columns: 2;
    -moz-columns: 2;
}


li:before {
  content: "• ";
}

Aqui está uma solução possível:

Snippet:

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

<ul id="double">
  <li>first</li>
  <li>second</li>
  <li>third</li>
  <li>fourth</li>
</ul>

E está feito.
Para 3 colunas, use lilargura como 33%, para 4 colunas, use 25% e assim por diante.

Esta é a maneira mais simples de fazer isso. Apenas CSS.

1. adicione largura ao elemento ul.
2. add display: bloco embutido e largura da nova coluna (deve ser menor que a metade da largura da ul).

ul.list {
  width: 300px;  
}

ul.list li{
  display:inline-block;
  width: 100px;
}

<ul class="list">
    <li>A</li>
    <li>B</li>
    <li>C</li>
    <li>D</li>
    <li>E</li>
</ul>

Você pode usar CSS apenas para definir duas colunas ou mais

AE

B

C

D

 <ul class="columns">
    <li>A</li>
    <li>B</li>
    <li>C</li>
    <li>D</li>
    <li>E</li>
</ul>

ul.columns  {
   -webkit-columns: 60px 2;
   -moz-columns: 60px 2;
    columns: 60px 2;
   -moz-column-fill: auto;
   column-fill: auto;
 }

Isso pode ser alcançado usando a propriedade css de contagem de colunas na div pai,

gostar

 column-count:2;

verifique isso para mais detalhes.

Como fazer a lista DIV flutuante aparecer em colunas, não em linhas

Você pode fazer isso com muita facilidade com o plug-in jQuery-Columns, por exemplo, para dividir um ul com uma classe de .mylist que você faria

$('.mylist').cols(2);

Aqui está um exemplo ao vivo no jsfiddle

Eu gosto disso melhor do que com CSS porque, com a solução CSS, nem tudo se alinha verticalmente ao topo.

mais uma resposta depois de alguns anos!

neste artigo: http://csswizardry.com/2010/02/mutiple-column-lists-using-one-ul/

HTML:

<ul id="double"> <!-- Alter ID accordingly -->
  <li>CSS</li>
  <li>XHTML</li>
  <li>Semantics</li>
  <li>Accessibility</li>
  <li>Usability</li>
  <li>Web Standards</li>
  <li>PHP</li>
  <li>Typography</li>
  <li>Grids</li>
  <li>CSS3</li>
  <li>HTML5</li>
  <li>UI</li>
</ul>

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

Em updateColumns()necessidade if (column >= columns.length), em vez de if (column > columns.length)para listar todos os elementos (C é saltado por exemplo) de modo a:

function updateColumns(){
    column = 0;
    columnItems.each(function(idx, el){
        if (column >= columns.length){
            column = 0;
        }
        console.log(column, el, idx);
        $(columns.get(column)).append(el);
        column += 1;
    });
}

http://jsfiddle.net/e2vH9/1/

Com o Bootstrap ... Esta resposta ( https://stackoverflow.com/a/23005046/1128742 ) me apontou para esta solução:

<ul class="list-unstyled row">
   <li class="col-xs-6">Item 1</li>
   <li class="col-xs-6">Item 2</li>
   <li class="col-xs-6">Item 3</li>
</ul>

http://jsfiddle.net/patrickbad767/472r0ynf/

A solução legada na resposta principal não funcionou para mim porque eu queria afetar várias listas na página e a resposta assume uma única lista, além de usar um pouco do estado global. Nesse caso, eu queria alterar todas as listas dentro de um <section class="list-content">:

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 < columns; i++) {
        section.append("<ul></ul>");
    }
    let lists = section.find("ul");
    for (let i = 0; i < items.length; i++) {
        lists.get(i % columns).append(items[i]);
    }
});

Embora eu tenha encontrado a resposta de Gabriel para trabalhar até certo ponto, encontrei o seguinte ao tentar ordenar a lista verticalmente (primeiro ul AD e segundo ul EG):

• Quando o ul continha um número par de li's, não o espalhava uniformemente pelos
• usar a coluna de dados no ul não pareceu funcionar muito bem, tive que colocar 4 por 3 colunas e mesmo assim ainda estava espalhando os li's em 2 dos ul gerados pelo JS

Revisei o JQuery para que o que foi dito acima não aconteça.

(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>

Thisd foi uma solução perfeita para mim, procurando por anos:

http://css-tricks.com/forums/topic/two-column-unordered-list/