Overlapping labels

Question

Greetings.

With the following code...

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

The labels are superimposed when the screen is lowered. I would like you to stay one at the bottom of the other. Can someone help me?

Thank you very much.

Answer 1

I suggest separating each label within one container (an element span with a class) and add display: inline-block.

Why inline-block?

A span by default is just inline, and the line he occupies is just that of the text within it. The inline-block gives a row height to the element according to it really occupies, soon what comes down will not overlap it.

Then that would be the code:

.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>