LI em coluna

[FabianoSouza 5]

Tenho essa lista

 

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

Preciso que ele fique assim:

1    2

3    4

5

 

Como faço um CSS para isso?

 

Obrigado.

[Felipe Guedes Coutinho 0]

FabianoSouza

Consegui fazer o que você pediu, mas não sei como você ira implementar isso em seu código.

 

<style>
#header
{
    margin: 0 auto;
    width: 780px;
    height: 75px;
}

#header ul
{
    margin: 0;
    padding: 15px 0 0 0;
    list-style-type: none;
    text-align: right;
    font-weight: bold;
    font-size: 80%;
    letter-spacing: -1px;
}

#header li 
{
    margin-left: 15px;
    color: #000;
}

#header li a
{
    text-decoration: none;
    color: #000;
}

#header li a:hover
{
    text-decoration: none;
    color: #97B0E6;
}

#headerleft
{
    float: left;
    width: 100px;
    height: 75px;
}

#headerleft ul
{
    text-align: left;
}

#headerleft li 
{
    display: inline;
    margin: 0 15px 0 0;
}
</style>
<div id="header">
  <div id="headerleft">
    <ul>
      <li>Inicio 1</a></li>
      <li>Inicio 2</a></li>
      <li>Inicio 3</a></li>
      <li>Inicio 4</a></li>
      <li>Inicio 5</a></li>
      <li>Inicio 6</a></li>
      <li>Inicio 7</a></li>
      <li>Inicio 8</a></li>
      <li>Inicio 9</a></li>
      <li>Inicio 0</a></li>
      <li>Inicio 1</a></li>
      <li>Inicio 2</a></li>
    </ul>
  </div>
</div>

 

Se a minha resposta for útil não esqueça de agradecer e votar positivo.

Espero ter ajudado de alguma forma.

 

Att
Felipe Guedes Coutinho

[FabianoSouza 5]

Oi Felipe!

Sua sugestão pode ajudar. Mas preciso evitar mudar a estrutura (usar DIV ou outros elementos) senão vai comprometer a hierarquia do meu layout. O ideal seria fazer só com a UL e LI mesmo.

 

De todo modo ou ver se consigo adaptar para minha necessidade.

 

Super obrigado. Só não vou marcar nenhuma reaction porque essa funcionalidade do fórum está dando erro quando clico. Também não sei como faço para marcar você na resposta
Valew mesmo!

[Omar~ 87]

Conseguir fazer usando uma "gabiarra" aqui.

Veja, o que eu fiz foi usar métodos diferentes a cada 2 itens da lista, enfim deu certo ^.^

 

<style>
    ul {
        list-style: none
    }
    ul > li:nth-child(1),
    ul > li:nth-child(2) {
        display: table-cell
    }
    ul > li:nth-child(3),
    ul > li:nth-child(4) {
        display: inline-block
    }
</style>

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

 

[FabianoSouza 5]

Muito obrigado @Omar~ !!

Funciona.