4

Consegui arredondar as bordas da div só 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>

5
  • Coloca o código CSS que você fez aí para continuarmos nele. Commented 2/12/2016 às 15:46
  • Pronto coloquei.
    – annyk
    Commented 2/12/2016 às 15:53
  • Já tentou colocar float: left; nas classes .redondoativo e .redondo? Commented 2/12/2016 às 15:56
  • É só tirar os <br> antes do número. Depois coloca line-height: 50px no lugar de 1.0 Commented 2/12/2016 às 15:57
  • Ja coloquei o floa left mais fica mais bagunçado BrunoRomualdo
    – annyk
    Commented 2/12/2016 às 16:00

3 Respostas 3

7

A questão do alinhamento, pode ter um único elemento (um parágrafo, por exemplo) e utilizar pseudo elementos para criar aquelas bolinhas com o número na frente:

.steps p {
  counter-increment: items /* contador de steps */
}

.steps p::before {
  border-radius: 50%;
  border: 1px solid #333;
  content: counter(items);
  display: inline-block;
  padding: 8px 16px;
  margin-right: 15%; /* distancia do circulo p/ o texto */
  pointer-events: none
}

.steps p.selected::before {
  border-color: #3D8EB9;
  background: #3D8EB9;
  color: #fff
}
<div class='steps'>
  <p class='selected'>Informações Cadastrais</p>
  <p>Selecionar Assinatura</p>
  <p>Forma de Pagamento</p>
</div>

Se quiser as bolinhas do lado direito, basta alterar a regra para .steps p::after e alterar o margin-right para margin-left.

1
4

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

5
  • Obrigada Gumball ficou melhor alinhado os numeros dentro da div mas não resolveu o problema ;) o texto ainda fica abaixo como na imagem!
    – annyk
    Commented 2/12/2016 às 16:03
  • Mas qual o problema ? Você disse não estou conseguindo alinhar o texto na frente da <div>... O que isso realmente significa ? Commented 2/12/2016 às 16:04
  • colocar o texto que esta dentro da class textoEtapas na frente da "bolinha" rs
    – annyk
    Commented 2/12/2016 às 16:06
  • Produção, de novo -1. Commented 2/12/2016 às 16:49
  • A resposta está ok, faltou só um text-align: center nessa regra .redondo pro texto ficar no meio da bolinha. +1 Commented 2/12/2016 às 19:20
4

No seu css adicione um height aos seus li assim:

.etapas ul li{
    height:30px;
}

E nas classes .redondo e .redondoativo coloque um float:left. Para finalizar deixe sua classe .textoEtapas assim:

.textoEtapas{
    height:30px;
    line-height:50px;
    float: left;
}

Dê uma olhada nesse exemplo do que fiz no CodePen.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .