Ir para conteúdo

Recommended Posts

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.

Compartilhar este post


Link para o post
Compartilhar em outros sites

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

Compartilhar este post


Link para o post
Compartilhar em outros sites

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 :grimace:
Valew
mesmo!

Compartilhar este post


Link para o post
Compartilhar em outros sites

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>

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

  • Conteúdo Similar

    • Por FabianoSouza
      Galera, por padrão, cada LI que se cria (via jscript), vai parar na parte inferior da UL, né?
      Há uma maneira de fazer a LI criada pela minha function ir para o topo da lista dentro da UL?
       
       
    • Por s3c0
      Olá pessoal,
       
      boa tarde. Tem alguma forma da DIV pai acompanhar a altura da ul filho?
       
      <div class="navPages-container" > <div class="container"> <nav class="navPages" style="text-align:left;"> <ul class="navPages-list"> <li class="navPages-item" style="z-index:3; width:122px;" onmouseover="mostra_fundo();" onmouseout="esconde_fundo();"><a class="navPages-action has-subMenu" href=""><i class="fa fa-list"></i> Categorias</a> <div id="menu2"> <ul class="parent-menu"> <li onmouseover="document.imgcategoria.src='https://www.vagparts.com.br/departamentos/acessorios.jpg'" onmouseout="document.imgcategoria.src='https://www.vagparts.com.br/departamentos/departamentos.jpg'"><a href="#1">Home & Kitchen</a> <div class="categoria"> <ul> <li><a href="#11">item1</a></li> <li><a href="#12" onmouseover="document.imgcategoria.src='https://www.vagparts.com.br/departamentos/acessorios.jpg'" onmouseout="document.imgcategoria.src='https://www.vagparts.com.br/departamentos/departamentos.jpg'">item2</a></li> <li><a href="#13"><i class="fa fa-list"></i> <span>Item 1</span> <i class="fas fa-angle-right" style="float:right; margin-right:10px;line-height:35px;"></i></a> <div class="subcategoria"> <ul > <li><a href="#111">item</a></li> <li><a href="#112">Even more</a></li> <li><a href="#113">item</a></li> <li><a href="#114">item</a></li> <li><a href="#115">item</a></li> </ul> </div> </li> <li><a href="#14">item4</a></li> <li><a href="#15">item5</a></li> <li><a href="#16">item6</a></li> </ul> </div> </li> #menu2{position:absolute;z-index:3;margin-top:16px; width:1170px; margin-left:-19px;background:#fff;box-shadow:0 1px 10px rgba(0,0,0,.1);border:1px solid #d0d0d0;border-radius:0 0 3px 3px; min-height:300px;display:none;font-size:14px;font-weight: bold;} .parent-menu{list-style-type:none;padding:15px 0px;width:270px;float:left;margin-top:0;position:absolute;line-height:35px;} .parent-menu li:hover{background:#ccc;cursor:pointer;} .categoria{display:none;width:270px;left:255px;line-height:35px;list-style-type:none;position: absolute;top: 15px;a {line-height: 35px;}} .categoria ul li:hover{background:#ccc;cursor:pointer;} .categoria ul{list-style-type:none;width:270px;} .categoria ul li{list-style-type:none;width:270px;} .subcategoria{display:none;width:270px;left:270px;line-height:35px;list-style-type:none;position: absolute;top: 0px;a {line-height: 35px;}} .subcategoria ul{list-style-type:none;width:270px;} .subcategoria ul li{list-style-type:none;width:270px;} .subcategoria ul li:hover{background:#ccc;cursor:pointer;} .navPages-item:hover #menu2{display:block;} .parent-menu li:hover .categoria{display:block;} .categoria ul li:hover .subcategoria{display:block;} #menu2 ul a { margin: 0px; display: block; width: 100%; height: 100%; } #menu2 ul li a { margin: 0px; display: block; width: 100%; height: 100%; }  

    • Por Bruno Goedert Dalmolin
      Fala devs Beleza? Estou com uma duvida em como eu movimento meu menu para o canto, pois ele fica travado no centro. Os dados são os seguintes: 
      do HTML:
       
      <header>
          <ul id="Menu">
              <li><a href="SmartAce-Home.html">Home</a></li>
              <li><a href="">Sobre</a></li>
              <li><a href="">Contato</a></li>
          </ul>
      </header>
       
      do CSS:
       
      @charset "UTF-8";
      body {
          margin: 0;
          padding: 0;
          display: flex;
          justify-content: center;
          align-items: center;
          height: 100vh;
          background: #112c38;
      }
      ul#Menu {
          
          text-align: center;
          margin: 0;
          padding: 0;
          display: flex;
          top: -10;
      }
      ul#Menu li{
          list-style: none;
          margin: 0 20px;
          transition: 0.5s;
      }
      ul#Menu li a{
          position: relative;
          text-decoration: none;
          padding: 5px;
          font-size: 18px;    
          font-family: sans-serif;
          color: #fff;
          text-transform: uppercase;
          transition: 0.5s;
      }
      ul#Menu:hover li a {
          transform: scale(1.4);
          opacity: .2;
          filter: blur(5px);
      }
      ul#Menu li a:hover {
          transform: scale(2);
          opacity: 1;
          filter: blur(0);
      }
      ul#Menu li a:before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: #ff497c;
          transition: transform 0.5s;
          transform-origin: right;
          transform: scaleX(0);
          z-index: -1;
      }
      ul#Menu li a:hover:before {
          transition: transform 0.5s;
          transform-origin: left;
          transform: scaleX(1);
      }
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.