1

Saudações.

Com o seguinte código...

https://jsfiddle.net/WRobynson/n10pttbb/2/

As etiquetas ficam sobrepostas quando a tela é diminuída. Gostaria que ficasse uma em baixo da outra. Alguém pode me ajudar?

Muito obrigado.

1
  • Se a resposta foi correta, a melhor forma de agradecer é marcando ✓.
    – Sam
    31/03/2018 às 4:37

1 Resposta 1

0

Sugiro separar cada etiqueta dentro de um container (um elemento span com uma classe) e adicionar display: inline-block.

Por que inline-block?

Um span por padrão é apenas inline, e a linha que ele ocupa é apenas a do texto dentro dele. O inline-block dá uma altura de linha ao elemento de acordo com ele realmente ocupa, logo o que vier abaixo não irá sobrepô-lo.

inserir a descrição da imagem aqui

Então ficaria assim o código:

.Lab1 {
	padding: 6px 12px;
	font-size: 12px;
	font-weight: bold;
	color: #555;
	text-align: center;
	background-color: #eee;
	border: 1px solid #ccc;
	border-right-color: transparent;
	border-radius: 4px 0 0 4px;
   display: inline-block;
}

.Lab2 {
	padding: 6px 12px;
	font-size: 12px;
	font-weight: normal;
	color: #555;
	text-align: left;
	background-color: #fff;
	border: 1px solid #ccc;
	border-left-color: transparent;
	border-radius: 0 4px 4px 0;
	/* white-space: nowrap; já não é mais necessário */
   display: inline-block;

}

.container{
  display: inline-block;
	white-space: nowrap;
}

/* div apenas para exemplo*/
div{
   width: 100px;
}
Dentro da div com 100px:
<div>
<span class="container">
   <span class='Lab1'>1º</span><span class='Lab2'>Primeiro</span>
</span>
<span class="container">
   <span class='Lab1'>2º</span><span class='Lab2'>Segundo</span>
</span>
<span class="container">
   <span class='Lab1'>3º</span><span class='Lab2'>Terceiro</span>
</span>
</div>
<br><br>
Fora da div:
<br>
<span class="container">
   <span class='Lab1'>1º</span><span class='Lab2'>Primeiro</span>
</span>
<span class="container">
   <span class='Lab1'>2º</span><span class='Lab2'>Segundo</span>
</span>
<span class="container">
   <span class='Lab1'>3º</span><span class='Lab2'>Terceiro</span>
</span>

2
  • 1
    Só pra deixar mais claro, para ele: os elementos inline possuem largura e altura correspondente ao conteúdo, mas não podem receber valores nas propriedades width e height. Quando trocamos o display para inline-block, o elemento passa a poder receber valores no width e height, além de não ocupar (por padrão) toda a largura possível, como fazem os elementos com display: block;
    – user54824
    31/03/2018 às 0:20
  • @JoãoLucas Isso mesmo.
    – Sam
    31/03/2018 às 0:26

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 .