Skip to main content
Tweeted twitter.com/StackOverflowPT/status/804832373233881088
removeu 371 caracteres do conteúdo; título editado
Fonte Link
Renan Gomes
  • 19,3mil
  • 8
  • 54
  • 114

Etapas Como alinhar o texto na frente de Compra com Css - Div Redondaoutro elemento?

        .boxEtapas {
           overflow: hidden;
       }
        
.etapas {
           margin: 0 auto;
       }
        
.etapas ul {
           list-style: none;
       }
        
.etapas ul,
       li {
           margin: 1px;
       }
        
.redondo {
           border-radius: 100%;
           background-color: #FFFFFF;
           overflow: hidden;
           height: 50px;
           width: 50px;
           border: 1px solid #000000;
           line-height: 1.0;
       }
        
.redondoativo {
           border-radius: 100%;
           background-color: #337ab7;
           overflow: hidden;
           height: 50px;
           width: 50px;
           color: #FFFFFF;
           text-align: center;
           line-height: 1.0;
       }
        
.textoEtapas {
           float: left;
       }
       <div class="col-sm-6 boxEtapas" align="center">
       <div class="etapas">
          <ul>
             <li>
        <div class="redondoativo">
       <div class="redondoativo"><br>1<  <br>1</div>
                <div class="textoEtapas"> Informaçõesclass="textoEtapas">Informações Cadastrais</div>
             </li>
             <li>|</li>
             <li>
        <div class="redondo">
       <div class="redondo"><br>2<  <br>2</div>
                <div class="textoEtapas">Selecionar Assinatura</div>
             </li>
             <li>|</li>
             <li>
        <div class="redondo">
       <div class="redondo"><br>3<  <br>3</div>
                <div class="textoEtapas"> Formaclass="textoEtapas">Forma de Pagamento</div>
             </li>
          </ul>
       </div>
    </div>

Etapas de Compra com Css - Div Redonda

        .boxEtapas {
           overflow: hidden;
       }
       .etapas {
           margin: 0 auto;
       }
       .etapas ul {
           list-style: none;
       }
       .etapas ul,
       li {
           margin: 1px;
       }
       .redondo {
           border-radius: 100%;
           background-color: #FFFFFF;
           overflow: hidden;
           height: 50px;
           width: 50px;
           border: 1px solid #000000;
           line-height: 1.0;
       }
       .redondoativo {
           border-radius: 100%;
           background-color: #337ab7;
           overflow: hidden;
           height: 50px;
           width: 50px;
           color: #FFFFFF;
           text-align: center;
           line-height: 1.0;
       }
       .textoEtapas {
           float: left;
       }
       <div class="col-sm-6 boxEtapas" align="center">
       <div class="etapas">
          <ul>
             <li>
                <div class="redondoativo"><br>1</div>
                <div class="textoEtapas"> Informações Cadastrais</div>
             </li>
             <li>|</li>
             <li>
                <div class="redondo"><br>2</div>
                <div class="textoEtapas">Selecionar Assinatura</div>
             </li>
             <li>|</li>
             <li>
                <div class="redondo"><br>3</div>
                <div class="textoEtapas"> Forma de Pagamento</div>
             </li>
          </ul>
       </div>
    </div>

Como alinhar o texto na frente de outro elemento?

.boxEtapas {
  overflow: hidden;
}
 
.etapas {
  margin: 0 auto;
}
 
.etapas ul {
  list-style: none;
}
 
.etapas ul,
li {
  margin: 1px;
}
 
.redondo {
  border-radius: 100%;
  background-color: #FFFFFF;
  overflow: hidden;
  height: 50px;
  width: 50px;
  border: 1px solid #000000;
  line-height: 1.0;
}
 
.redondoativo {
  border-radius: 100%;
  background-color: #337ab7;
  overflow: hidden;
  height: 50px;
  width: 50px;
  color: #FFFFFF;
  text-align: center;
  line-height: 1.0;
}
 
.textoEtapas {
  float: left;
}
<div class="col-sm-6 boxEtapas" align="center">
  <div class="etapas">
    <ul>
      <li>
        <div class="redondoativo">
          <br>1</div>
        <div class="textoEtapas">Informações Cadastrais</div>
      </li>
      <li>|</li>
      <li>
        <div class="redondo">
          <br>2</div>
        <div class="textoEtapas">Selecionar Assinatura</div>
      </li>
      <li>|</li>
      <li>
        <div class="redondo">
          <br>3</div>
        <div class="textoEtapas">Forma de Pagamento</div>
      </li>
    </ul>
  </div>
</div>
adicionou 13 caracteres ao conteúdo
Fonte Link
Marconi
  • 18mil
  • 20
  • 69
  • 132

Estou tantando fazer igual a imagem, ja conseguiConsegui arredondar as bordas da div so não esouestou conseguindo alinhar o texto na frente da div. Podem me ajudar?

Esses trabalhos da escola acabam comigo.

Codigo das Div'sMeu código está assim:

      <div>
              <div class="col-sm-6 boxEtapas" align="center">
              <div class="etapas">
                <ul>
                  <li><div class="redondoativo"><br>1</div><div class="textoEtapas"> Informações Cadastrais</div></li>
                  <li>|</li>
                  <li><div class="redondo"><br>2</div><div class="textoEtapas">Selecionar Assinatura</div></li>
                  <li>|</li>
                  <li><div class="redondo"><br>3</div><div class="textoEtapas"> Forma de Pagamento</div></li>
                </ul>
              </div>
              </div>

Css

        .boxEtapas {
           overflow: hidden;
       }
       .etapas {
           margin: 0 auto;
       }
       .etapas ul {
           list-style: none;
       }
       .etapas ul,
       li {
           margin: 1px;
       }
       .redondo {
           border-radius: 100%;
           background-color: #FFFFFF;
           overflow: hidden;
           height: 50px;
           width: 50px;
           border: 1px solid #000000;
           line-height: 1.0;
       }
       .redondoativo {
           border-radius: 100%;
           background-color: #337ab7;
           overflow: hidden;
           height: 50px;
           width: 50px;
           color: #FFFFFF;
           text-align: center;
           line-height: 1.0;
       }
       .textoEtapas {
           float: left;
       }
       <div class="col-sm-6 boxEtapas" align="center">
       <div class="etapas">
          <ul>
             <li>
                <div class="redondoativo"><br>1</div>
                <div class="textoEtapas"> Informações Cadastrais</div>
             </li>
             <li>|</li>
             <li>
                <div class="redondo"><br>2</div>
                <div class="textoEtapas">Selecionar Assinatura</div>
             </li>
             <li>|</li>
             <li>
                <div class="redondo"><br>3</div>
                <div class="textoEtapas"> Forma de Pagamento</div>
             </li>
          </ul>
       </div>
    </div>
         .boxEtapas{
            overflow: hidden;
          }

          .etapas{
            margin: 0 auto;
          }

          .etapas ul{
            list-style: none;
          }

          .etapas ul, li{
            margin: 1px;
          }

          .redondo {
              border-radius: 100%;
              background-color: #FFFFFF;
              overflow: hidden;
              height: 50px;
              width:50px;
              border: 1px solid #000000;
              line-height: 1.0;
                 
          }


          .redondoativo {
              border-radius: 100%;
              background-color: #337ab7;
              overflow: hidden;
              height: 50px;
              width:50px;
              color: #FFFFFF;
              text-align: center;
              line-height: 1.0;
              
              
          }

          .textoEtapas{
            float: left;
          }
 

Estou tantando fazer igual a imagem, ja consegui arredondar as bordas da div so não esou conseguindo alinhar o texto na frente da div. Podem me ajudar?

Esses trabalhos da escola acabam comigo.

Codigo das Div's

      <div>
              <div class="col-sm-6 boxEtapas" align="center">
              <div class="etapas">
                <ul>
                  <li><div class="redondoativo"><br>1</div><div class="textoEtapas"> Informações Cadastrais</div></li>
                  <li>|</li>
                  <li><div class="redondo"><br>2</div><div class="textoEtapas">Selecionar Assinatura</div></li>
                  <li>|</li>
                  <li><div class="redondo"><br>3</div><div class="textoEtapas"> Forma de Pagamento</div></li>
                </ul>
              </div>
              </div>

Css

         .boxEtapas{
            overflow: hidden;
          }

          .etapas{
            margin: 0 auto;
          }

          .etapas ul{
            list-style: none;
          }

          .etapas ul, li{
            margin: 1px;
          }

          .redondo {
              border-radius: 100%;
              background-color: #FFFFFF;
              overflow: hidden;
              height: 50px;
              width:50px;
              border: 1px solid #000000;
              line-height: 1.0;
                 
          }


          .redondoativo {
              border-radius: 100%;
              background-color: #337ab7;
              overflow: hidden;
              height: 50px;
              width:50px;
              color: #FFFFFF;
              text-align: center;
              line-height: 1.0;
              
              
          }

          .textoEtapas{
            float: left;
          }

Consegui arredondar as bordas da div não estou conseguindo alinhar o texto na frente da div.

Meu código está assim:

        .boxEtapas {
           overflow: hidden;
       }
       .etapas {
           margin: 0 auto;
       }
       .etapas ul {
           list-style: none;
       }
       .etapas ul,
       li {
           margin: 1px;
       }
       .redondo {
           border-radius: 100%;
           background-color: #FFFFFF;
           overflow: hidden;
           height: 50px;
           width: 50px;
           border: 1px solid #000000;
           line-height: 1.0;
       }
       .redondoativo {
           border-radius: 100%;
           background-color: #337ab7;
           overflow: hidden;
           height: 50px;
           width: 50px;
           color: #FFFFFF;
           text-align: center;
           line-height: 1.0;
       }
       .textoEtapas {
           float: left;
       }
       <div class="col-sm-6 boxEtapas" align="center">
       <div class="etapas">
          <ul>
             <li>
                <div class="redondoativo"><br>1</div>
                <div class="textoEtapas"> Informações Cadastrais</div>
             </li>
             <li>|</li>
             <li>
                <div class="redondo"><br>2</div>
                <div class="textoEtapas">Selecionar Assinatura</div>
             </li>
             <li>|</li>
             <li>
                <div class="redondo"><br>3</div>
                <div class="textoEtapas"> Forma de Pagamento</div>
             </li>
          </ul>
       </div>
    </div>
 

conteúdo editado
Fonte Link
annyk
  • 115
  • 9

Codigo das Div's

      <div>
              <div class="col-sm-6 boxEtapas" align="center">
              <div class="etapas">
                <ul>
                  <li><div class="redondoativo"><br>1</div><div class="textoEtapas"> Informações Cadastrais</div></li>
                  <li>|</li>
                  <li><div class="redondo"><br>2</div><div class="textoEtapas">Selecionar Assinatura</div></li>
                  <li>|</li>
                  <li><div class="redondo"><br>3</div><div class="textoEtapas"> Forma de Pagamento</div></li>
                </ul>
              </div>
              </div>

Css

         .boxEtapas{
            overflow: hidden;
          }

          .etapas{
            margin: 0 auto;
          }

          .etapas ul{
            list-style: none;
          }

          .etapas ul, li{
            margin: 1px;
          }

          .redondo {
              border-radius: 100%;
              background-color: #FFFFFF;
              overflow: hidden;
              height: 50px;
              width:50px;
              border: 1px solid #000000;
              line-height: 1.0;
                 
          }


          .redondoativo {
              border-radius: 100%;
              background-color: #337ab7;
              overflow: hidden;
              height: 50px;
              width:50px;
              color: #FFFFFF;
              text-align: center;
              line-height: 1.0;
              
              
          }

          .textoEtapas{
            float: left;
          }

Codigo das Div's

      <div>
              <div class="col-sm-6 boxEtapas" align="center">
              <div class="etapas">
                <ul>
                  <li><div class="redondoativo"><br>1</div><div class="textoEtapas"> Informações Cadastrais</div></li>
                  <li>|</li>
                  <li><div class="redondo"><br>2</div><div class="textoEtapas">Selecionar Assinatura</div></li>
                  <li>|</li>
                  <li><div class="redondo"><br>3</div><div class="textoEtapas"> Forma de Pagamento</div></li>
                </ul>
              </div>
              </div>

Css

         .boxEtapas{
            overflow: hidden;
          }

          .etapas{
            margin: 0 auto;
          }

          .etapas ul{
            list-style: none;
          }

          .etapas ul, li{
            margin: 1px;
          }

          .redondo {
              border-radius: 100%;
              background-color: #FFFFFF;
              overflow: hidden;
              height: 50px;
              width:50px;
              border: 1px solid #000000;
              line-height: 1.0;
                 
          }


          .redondoativo {
              border-radius: 100%;
              background-color: #337ab7;
              overflow: hidden;
              height: 50px;
              width:50px;
              color: #FFFFFF;
              text-align: center;
              line-height: 1.0;
              
              
          }

          .textoEtapas{
            float: left;
          }
Fonte Link
annyk
  • 115
  • 9
Carregando